import { LitElement, html, css, unsafeCSS } from 'lit'
import { customElement, property } from 'lit/decorators.js';
import wfStyle from './css/wf.scss?inline'

type TWindowFormState = 'default' | 'minimized' | 'maximized';

/** 拖拽移动开始的回调 */
type TDragStartCallback = (x: number, y: number) => void;
/** 拖拽移动中的回调 */
type TDragMoveCallback = (x: number, y: number) => void;
/** 拖拽移动结束的回调 */
type TDragEndCallback = (x: number, y: number) => void;

/** 拖拽调整尺寸的方向 */
type TResizeDirection =
  | 't' //  上
  | 'b' //  下
  | 'l' //  左
  | 'r' //  右
  | 'tl' //  左上
  | 'tr' //  右上
  | 'bl' //  左下
  | 'br'; //  右下

/** 拖拽调整尺寸回调数据 */
interface IResizeCallbackData {
  /** 宽度 */
  width: number;
  /** 高度 */
  height: number;
  /** 顶点坐标（相对 offsetParent） */
  top: number;
  /** 左点坐标（相对 offsetParent） */
  left: number;
  /** 拖拽调整尺寸的方向 */
  direction: TResizeDirection | null;
}

/** 元素边界 */
interface IElementRect {
  /** 宽度 */
  width: number;
  /** 高度 */
  height: number;
  /** 顶点坐标（相对 offsetParent） */
  top: number;
  /** 左点坐标（相对 offsetParent） */
  left: number;
}

/** 窗口自定义事件 */
export interface WindowFormEventMap extends HTMLElementEventMap {
  'windowForm:dragStart': CustomEvent<TDragStartCallback>;
  'windowForm:dragMove': CustomEvent<TDragMoveCallback>;
  'windowForm:dragEnd': CustomEvent<TDragEndCallback>;
  'windowForm:resizeStart': CustomEvent<IResizeCallbackData>;
  'windowForm:resizeMove': CustomEvent<IResizeCallbackData>;
  'windowForm:resizeEnd': CustomEvent<IResizeCallbackData>;
  'windowForm:stateChange': CustomEvent<{ state: TWindowFormState }>;
  'windowForm:stateChange:minimize': CustomEvent<{ state: TWindowFormState }>;
  'windowForm:stateChange:maximize': CustomEvent<{ state: TWindowFormState }>;
  'windowForm:stateChange:restore': CustomEvent<{ state: TWindowFormState }>;
  'windowForm:close': CustomEvent;
  'windowForm:minimize': CustomEvent;
}

@customElement('window-form-element')
export class WindowFormElement extends LitElement {
  // ==== 公共属性 ====
  @property({ type: String }) wid: string
  @property({ type: String }) override title = 'Window'
  @property({ type: Boolean }) resizable = true
  @property({ type: Boolean }) minimizable = true
  @property({ type: Boolean }) maximizable = true
  @property({ type: Boolean }) closable = true
  @property({ type: Boolean, reflect: true }) focused: boolean = true
  @property({ type: String, reflect: true }) windowFormState: TWindowFormState = 'default'
  @property({ type: Object }) dragContainer?: HTMLElement
  @property({ type: Boolean }) allowOverflow = true // 允许窗口超出容器
  @property({ type: Number }) snapDistance = 20 // 吸附距离
  @property({ type: Boolean }) snapAnimation = true // 吸附动画
  @property({ type: Number }) snapAnimationDuration = 300 // 吸附动画时长 ms
  @property({ type: Number }) maxWidth?: number = Infinity
  @property({ type: Number }) minWidth?: number = 0
  @property({ type: Number }) maxHeight?: number = Infinity
  @property({ type: Number }) minHeight?: number = 0
  @property({ type: String }) taskbarElementId?: string
  @property({ type: Object }) wfData: any;

  private _listeners: Array<{ type: string; original: Function; wrapped: EventListener }> = []

  // ==== 拖拽/缩放状态（内部变量，不触发渲染） ====
  private dragging = false
  private resizeDir: TResizeDirection | null = null
  private startX = 0
  private startY = 0
  private startWidth = 0
  private startHeight = 0
  private startX_host = 0
  private startY_host = 0

  private x = 0
  private y = 0
  private preX = 0
  private preY = 0
  private width = 640
  private height = 360
  private animationFrame?: number
  private resizing = false

  // private get x() {
  //   return this.wfData.state.x
  // }
  // private set x(value: number) {
  //   this.wfData.patch({ x: value })
  // }
  // private get y() {
  //   return this.wfData.state.y
  // }
  // private set y(value: number) {
  //   this.wfData.patch({ y: value })
  // }

  // private windowFormState: TWindowFormState = 'default';
  /** 元素信息 */
  private targetBounds: IElementRect
  /** 最小化前的元素信息 */
  private targetPreMinimizeBounds?: IElementRect
  /** 最大化前的元素信息 */
  private targetPreMaximizedBounds?: IElementRect

  static override styles = css`
    ${unsafeCSS(wfStyle)}
  `

  protected override createRenderRoot() {
    const root = this.attachShadow({ mode: 'closed' })
    const sheet = new CSSStyleSheet()
    sheet.replaceSync(wfStyle)
    root.adoptedStyleSheets = [sheet]
    return root
  }

  public addManagedEventListener<K extends keyof WindowFormEventMap>(
    type: K,
    handler: (this: WindowFormElement, ev: WindowFormEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions
  ): void
  public addManagedEventListener<K extends keyof WindowFormEventMap>(
    type: K,
    handler: (ev: WindowFormEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions
  ): void
  /**
   * 添加受管理的事件监听
   * @param type 事件类型
   * @param handler 事件处理函数
   */
  public addManagedEventListener<K extends keyof WindowFormEventMap>(
    type: K,
    handler:
      | ((this: WindowFormElement, ev: WindowFormEventMap[K]) => any)
      | ((ev: WindowFormEventMap[K]) => any),
    options?: boolean | AddEventListenerOptions
  ) {
    const wrapped: EventListener = (ev: Event) => {
      (handler as any).call(this, ev as WindowFormEventMap[K])
    }

    this.addEventListener(type, wrapped, options)
    this._listeners.push({ type, original: handler, wrapped })
  }

  public removeManagedEventListener<K extends keyof WindowFormEventMap>(
    type: K,
    handler:
      | ((this: WindowFormElement, ev: WindowFormEventMap[K]) => any)
      | ((ev: WindowFormEventMap[K]) => any)
  ) {
    const index = this._listeners.findIndex(
      l => l.type === type && l.original === handler
    )
    if (index !== -1) {
      const { type: t, wrapped } = this._listeners[index]
      this.removeEventListener(t, wrapped)
      this._listeners.splice(index, 1)
    }
  }

  /**
   * 移除所有受管理事件监听
   */
  public removeAllManagedListeners() {
    for (const { type, wrapped } of this._listeners) {
      this.removeEventListener(type, wrapped)
    }
    this._listeners = []
  }

  override firstUpdated() {
    console.log(this.wfData)
    // wfem.addEventListener('windowFormFocus', this.windowFormFocusFun)
    window.addEventListener('pointerup', this.onPointerUp)
    window.addEventListener('pointermove', this.onPointerMove)
    this.addEventListener('pointerdown', this.toggleFocus)

    const container = this.dragContainer || document.body
    const containerRect = container.getBoundingClientRect()
    this.x = containerRect.width / 2 - this.width / 2
    this.y = containerRect.height / 2 - this.height / 2
    this.style.width = `${this.width}px`
    this.style.height = `${this.height}px`
    this.style.transform = `translate(${this.x}px, ${this.y}px)`

    this.targetBounds = {
      width: this.offsetWidth,
      height: this.offsetHeight,
      top: this.x,
      left: this.y,
    }
  }

  override disconnectedCallback() {
    super.disconnectedCallback()
    window.removeEventListener('pointerup', this.onPointerUp)
    window.removeEventListener('pointermove', this.onPointerMove)
    this.removeEventListener('pointerdown', this.toggleFocus)
    // wfem.removeEventListener('windowFormFocus', this.windowFormFocusFun)
    this.removeAllManagedListeners()
  }

  private windowFormFocusFun = (id: string) => {
    if (id === this.wid) {
      this.focused = true
    } else {
      this.focused = false
    }
  }

  private toggleFocus = () => {
    this.focused = !this.focused
    // wfem.notifyEvent('windowFormFocus', this.wid)
    this.dispatchEvent(
      new CustomEvent('update:focused', {
        detail: this.focused,
        bubbles: true,
        composed: true,
      }),
    )
  }

  // ====== 拖拽 ======
  private onTitlePointerDown = (e: PointerEvent) => {
    if (e.pointerType === 'mouse' && e.button !== 0) return
    if ((e.target as HTMLElement).closest('.controls')) return

    e.preventDefault()

    this.dragging = true
    this.startX = e.clientX
    this.startY = e.clientY
    this.preX = this.x
    this.preY = this.y
    this.setPointerCapture?.(e.pointerId)

    this.dispatchEvent(
      new CustomEvent('windowForm:dragStart', {
        detail: { x: this.x, y: this.y },
        bubbles: true,
        composed: true,
      }),
    )
  }

  private onPointerMove = (e: PointerEvent) => {
    if (this.dragging) {
      const dx = e.clientX - this.startX
      const dy = e.clientY - this.startY

      const x = this.preX + dx
      const y = this.preY + dy

      this.applyPosition(x, y, false)
      this.dispatchEvent(
        new CustomEvent('windowForm:dragMove', {
          detail: { x, y },
          bubbles: true,
          composed: true,
        }),
      )
    } else if (this.resizeDir) {
      this.performResize(e)
    }
  }

  private onPointerUp = (e: PointerEvent) => {
    if (this.dragging) {
      this.dragUp(e)
    }
    if (this.resizeDir) {
      this.resizeUp(e)
    }
    this.dragging = false
    this.resizing = false
    this.resizeDir = null
    document.body.style.cursor = ''
    try {
      this.releasePointerCapture?.(e.pointerId)
    } catch {}
  }

  /** 获取所有吸附点 */
  private getSnapPoints() {
    const snapPoints = { x: [] as number[], y: [] as number[] }
    const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
    const rect = this.getBoundingClientRect()
    snapPoints.x = [0, containerRect.width - rect.width]
    snapPoints.y = [0, containerRect.height - rect.height]
    return snapPoints
  }

  /**
   * 获取最近的吸附点
   * @param x 左上角起始点x
   * @param y 左上角起始点y
   */
  private applySnapping(x: number, y: number) {
    let snappedX = x,
      snappedY = y
    const containerSnap = this.getSnapPoints()
    if (this.snapDistance > 0) {
      for (const sx of containerSnap.x)
        if (Math.abs(x - sx) <= this.snapDistance) {
          snappedX = sx
          break
        }
      for (const sy of containerSnap.y)
        if (Math.abs(y - sy) <= this.snapDistance) {
          snappedY = sy
          break
        }
    }
    return { x: snappedX, y: snappedY }
  }

  private dragUp(e: PointerEvent) {
    const snapped = this.applySnapping(this.x, this.y)
    if (this.snapAnimation) {
      this.animateTo(snapped.x, snapped.y, this.snapAnimationDuration, () => {
        this.updateTargetBounds(snapped.x, snapped.y)
        this.dispatchEvent(
          new CustomEvent('windowForm:dragEnd', {
            detail: { x: snapped.x, y: snapped.y },
            bubbles: true,
            composed: true,
          }),
        )
      })
    } else {
      this.applyPosition(snapped.x, snapped.y, true)
      this.updateTargetBounds(snapped.x, snapped.y)
      this.dispatchEvent(
        new CustomEvent('windowForm:dragEnd', {
          detail: { x: snapped.x, y: snapped.y },
          bubbles: true,
          composed: true,
        }),
      )
    }
  }

  private applyPosition(x: number, y: number, isFinal: boolean) {
    this.x = x
    this.y = y
    this.style.transform = `translate(${x}px, ${y}px)`
    if (isFinal) this.applyBoundary()
  }

  private applyBoundary() {
    if (this.allowOverflow) return
    let { x, y } = { x: this.x, y: this.y }

    const rect = this.getBoundingClientRect()
    const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
    x = Math.min(Math.max(x, 0), containerRect.width - rect.width)
    y = Math.min(Math.max(y, 0), containerRect.height - rect.height)

    this.applyPosition(x, y, false)
  }

  private animateTo(targetX: number, targetY: number, duration: number, onComplete?: () => void) {
    if (this.animationFrame) cancelAnimationFrame(this.animationFrame)
    const startX = this.x
    const startY = this.y
    const deltaX = targetX - startX
    const deltaY = targetY - startY
    const startTime = performance.now()

    const step = (now: number) => {
      const elapsed = now - startTime
      const progress = Math.min(elapsed / duration, 1)
      const ease = 1 - Math.pow(1 - progress, 3)

      const x = startX + deltaX * ease
      const y = startY + deltaY * ease

      this.applyPosition(x, y, false)
      this.dispatchEvent(
        new CustomEvent('windowForm:dragMove', {
          detail: { x, y },
          bubbles: true,
          composed: true,
        }),
      )

      if (progress < 1) {
        this.animationFrame = requestAnimationFrame(step)
      } else {
        this.applyPosition(targetX, targetY, true)
        onComplete?.()
      }
    }
    this.animationFrame = requestAnimationFrame(step)
  }

  // ====== 缩放 ======
  private startResize = (dir: TResizeDirection, e: PointerEvent) => {
    if (!this.resizable) return
    if (e.pointerType === 'mouse' && e.button !== 0) return

    e.preventDefault()
    e.stopPropagation()
    this.resizing = true
    this.resizeDir = dir
    this.startX = e.clientX
    this.startY = e.clientY

    const rect = this.getBoundingClientRect()
    this.startWidth = rect.width
    this.startHeight = rect.height
    this.startX_host = rect.left
    this.startY_host = rect.top

    const target = e.target as HTMLElement
    document.body.style.cursor = target.style.cursor || window.getComputedStyle(target).cursor

    this.setPointerCapture?.(e.pointerId)
    this.dispatchEvent(
      new CustomEvent('windowForm:resizeStart', {
        detail: { x: this.x, y: this.y, width: this.width, height: this.height, dir },
        bubbles: true,
        composed: true,
      }),
    )
  }

  private performResize(e: PointerEvent) {
    if (!this.resizeDir || !this.resizing) return

    let newWidth = this.startWidth
    let newHeight = this.startHeight
    let newX = this.startX_host
    let newY = this.startY_host

    const dx = e.clientX - this.startX
    const dy = e.clientY - this.startY

    switch (this.resizeDir) {
      case 'r':
        newWidth += dx
        break
      case 'b':
        newHeight += dy
        break
      case 'l':
        newWidth -= dx
        newX += dx
        break
      case 't':
        newHeight -= dy
        newY += dy
        break
      case 'tl':
        newWidth -= dx
        newX += dx
        newHeight -= dy
        newY += dy
        break
      case 'tr':
        newWidth += dx
        newHeight -= dy
        newY += dy
        break
      case 'bl':
        newWidth -= dx
        newX += dx
        newHeight += dy
        break
      case 'br':
        newWidth += dx
        newHeight += dy
        break
    }

    const d = this.applyResizeBounds(newX, newY, newWidth, newHeight)

    this.dispatchEvent(
      new CustomEvent('windowForm:resizeMove', {
        detail: { dir: this.resizeDir, width: d.width, height: d.height, left: d.left, top: d.top },
        bubbles: true,
        composed: true,
      }),
    )
  }

  /**
   * 应用尺寸调整边界
   * @param newX 新的X坐标
   * @param newY 新的Y坐标
   * @param newWidth 新的宽度
   * @param newHeight 新的高度
   * @private
   */
  private applyResizeBounds(
    newX: number,
    newY: number,
    newWidth: number,
    newHeight: number,
  ): {
    left: number
    top: number
    width: number
    height: number
  } {
    // 最小/最大宽高限制
    if (this.minWidth != null) newWidth = Math.max(this.minWidth, newWidth)
    if (this.maxWidth != null) newWidth = Math.min(this.maxWidth, newWidth)
    if (this.minHeight != null) newHeight = Math.max(this.minHeight, newHeight)
    if (this.maxHeight != null) newHeight = Math.min(this.maxHeight, newHeight)

    // 边界限制
    if (this.allowOverflow) {
      this.x = newX
      this.y = newY
      this.width = newWidth
      this.height = newHeight
      this.style.width = `${newWidth}px`
      this.style.height = `${newHeight}px`
      this.applyPosition(newX, newY, false)

      return {
        left: newX,
        top: newY,
        width: newWidth,
        height: newHeight,
      }
    }

    const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
    newX = Math.min(Math.max(0, newX), containerRect.width - newWidth)
    newY = Math.min(Math.max(0, newY), containerRect.height - newHeight)

    this.x = newX
    this.y = newY
    this.width = newWidth
    this.height = newHeight
    this.style.width = `${newWidth}px`
    this.style.height = `${newHeight}px`
    this.applyPosition(newX, newY, false)

    return {
      left: newX,
      top: newY,
      width: newWidth,
      height: newHeight,
    }
  }

  private resizeUp(e: PointerEvent) {
    if (!this.resizable) return

    this.updateTargetBounds(this.x, this.y, this.width, this.height)
    this.dispatchEvent(
      new CustomEvent('windowForm:resizeEnd', {
        detail: {
          dir: this.resizeDir,
          width: this.width,
          height: this.height,
          left: this.x,
          top: this.y,
        },
        bubbles: true,
        composed: true,
      }),
    )
  }

  // ====== 窗口操作 ======
  // 最小化到任务栏
  private minimize() {
    if (!this.taskbarElementId) return
    if (this.windowFormState === 'minimized') return
    this.targetPreMinimizeBounds = { ...this.targetBounds }
    this.windowFormState = 'minimized'

    const taskbar = document.querySelector(this.taskbarElementId)
    if (!taskbar) throw new Error('任务栏元素未找到')

    const rect = taskbar.getBoundingClientRect()
    const startX = this.x
    const startY = this.y
    const startW = this.offsetWidth
    const startH = this.offsetHeight

    this.animateWindow(
      startX,
      startY,
      startW,
      startH,
      rect.left,
      rect.top,
      rect.width,
      rect.height,
      400,
      () => {
        this.style.display = 'none'
        this.dispatchEvent(
          new CustomEvent('windowForm:stateChange:minimize', {
            detail: { state: this.windowFormState },
            bubbles: true,
            composed: true,
          })
        )
      }
    )
  }

  /** 最大化 */
  private maximize() {
    if (this.windowFormState === 'maximized') {
      this.restore()
      return
    }
    this.targetPreMaximizedBounds = { ...this.targetBounds }
    this.windowFormState = 'maximized'

    const rect = this.getBoundingClientRect()

    const startX = this.x
    const startY = this.y
    const startW = rect.width
    const startH = rect.height

    const targetX = 0
    const targetY = 0
    const containerRect = (this.dragContainer || document.body).getBoundingClientRect()
    const targetW = containerRect?.width ?? window.innerWidth
    const targetH = containerRect?.height ?? window.innerHeight

    this.animateWindow(
      startX,
      startY,
      startW,
      startH,
      targetX,
      targetY,
      targetW,
      targetH,
      300,
      () => {
        this.dispatchEvent(
          new CustomEvent('windowForm:stateChange:maximize', {
            detail: { state: this.windowFormState },
            bubbles: true,
            composed: true,
          }),
        )
      },
    )
  }

  /** 恢复到默认窗体状态 */
  private restore(onComplete?: () => void) {
    if (this.windowFormState === 'default') return
    let b: IElementRect
    if (
      (this.windowFormState as TWindowFormState) === 'minimized' &&
      this.targetPreMinimizeBounds
    ) {
      // 最小化恢复，恢复到最小化前的状态
      b = this.targetPreMinimizeBounds
    } else if (
      (this.windowFormState as TWindowFormState) === 'maximized' &&
      this.targetPreMaximizedBounds
    ) {
      // 最大化恢复，恢复到最大化前的默认状态
      b = this.targetPreMaximizedBounds
    } else {
      b = this.targetBounds
    }

    this.windowFormState = 'default'

    this.style.display = 'block'

    const startX = this.x
    const startY = this.y
    const startW = this.offsetWidth
    const startH = this.offsetHeight

    this.animateWindow(
      startX,
      startY,
      startW,
      startH,
      b.left,
      b.top,
      b.width,
      b.height,
      300,
      () => {
        onComplete?.()
        this.dispatchEvent(
          new CustomEvent('windowForm:stateChange:restore', {
            detail: { state: this.windowFormState },
            bubbles: true,
            composed: true,
          }),
        )
      },
    )
  }

  private windowFormClose() {
    this.dispatchEvent(
      new CustomEvent('windowForm:close', {
        bubbles: true,
        composed: true,
      }),
    )
  }

  /**
   * 窗体最大化、最小化和恢复默认 动画
   * @param startX
   * @param startY
   * @param startW
   * @param startH
   * @param targetX
   * @param targetY
   * @param targetW
   * @param targetH
   * @param duration
   * @param onComplete
   * @private
   */
  private animateWindow(
    startX: number,
    startY: number,
    startW: number,
    startH: number,
    targetX: number,
    targetY: number,
    targetW: number,
    targetH: number,
    duration: number,
    onComplete?: () => void,
  ) {
    const startTime = performance.now()
    const step = (now: number) => {
      const elapsed = now - startTime
      const progress = Math.min(elapsed / duration, 1)
      const ease = 1 - Math.pow(1 - progress, 3)

      const x = startX + (targetX - startX) * ease
      const y = startY + (targetY - startY) * ease
      const w = startW + (targetW - startW) * ease
      const h = startH + (targetH - startH) * ease

      this.style.width = `${w}px`
      this.style.height = `${h}px`
      this.applyPosition(x, y, false)

      if (progress < 1) {
        requestAnimationFrame(step)
      } else {
        this.style.width = `${targetW}px`
        this.style.height = `${targetH}px`
        this.applyPosition(targetX, targetY, true)
        onComplete?.()
        this.dispatchEvent(
          new CustomEvent('windowForm:stateChange', {
            detail: { state: this.windowFormState },
            bubbles: true,
            composed: true,
          })
        )
      }
    }
    requestAnimationFrame(step)
  }

  private updateTargetBounds(left: number, top: number, width?: number, height?: number) {
    this.targetBounds = {
      left,
      top,
      width: width ?? this.offsetWidth,
      height: height ?? this.offsetHeight,
    }
  }

  // ====== 渲染 ======
  override render() {
    return html`
      <div class="window">
        <div class="titlebar" @pointerdown=${this.onTitlePointerDown}>
          <div class="title" title=${this.title}>${this.title}</div>
          <div class="controls">
            ${this.minimizable
              ? html`<button
                  class="ctrl"
                  @click=${(e: Event) => {
                    e.stopPropagation()
                    this.minimize()
                  }}
                >
                  —
                </button>`
              : null}
            ${this.maximizable
              ? html`<button
                  class="ctrl"
                  @click=${(e: Event) => {
                    e.stopPropagation()
                    this.maximize()
                  }}
                >
                  ${this.windowFormState === 'maximized' ? '▣' : '▢'}
                </button>`
              : null}
            ${this.closable
              ? html`<button
                  class="ctrl"
                  @click=${(e: Event) => {
                    e.stopPropagation()
                    this.windowFormClose()
                  }}
                >
                  ✕
                </button>`
              : null}
          </div>
        </div>

        <div class="content"><slot></slot></div>

        ${this.resizable
          ? html`
              <div
                class="resizer t"
                @pointerdown=${(e: PointerEvent) => this.startResize('t', e)}
              ></div>
              <div
                class="resizer b"
                @pointerdown=${(e: PointerEvent) => this.startResize('b', e)}
              ></div>
              <div
                class="resizer r"
                @pointerdown=${(e: PointerEvent) => this.startResize('r', e)}
              ></div>
              <div
                class="resizer l"
                @pointerdown=${(e: PointerEvent) => this.startResize('l', e)}
              ></div>
              <div
                class="resizer tr"
                @pointerdown=${(e: PointerEvent) => this.startResize('tr', e)}
              ></div>
              <div
                class="resizer tl"
                @pointerdown=${(e: PointerEvent) => this.startResize('tl', e)}
              ></div>
              <div
                class="resizer br"
                @pointerdown=${(e: PointerEvent) => this.startResize('br', e)}
              ></div>
              <div
                class="resizer bl"
                @pointerdown=${(e: PointerEvent) => this.startResize('bl', e)}
              ></div>
            `
          : null}
      </div>
    `
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'window-form-element': WindowFormElement;
  }

  interface WindowFormElementEventMap extends WindowFormEventMap {}
}