import ProcessImpl from '@/core/process/impl/ProcessImpl.ts'
import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
import { createApp, h } from 'vue'
import DesktopComponent from '@/core/desktop/ui/DesktopComponent.vue'
import { naiveUi } from '@/core/common/naive-ui/components.ts'
import { debounce } from 'lodash'
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
import { processManager } from '@/core/process/ProcessManager.ts'
import './ui/DesktopElement.ts'
import { ObservableImpl } from '@/core/state/impl/ObservableImpl.ts'

interface IDesktopDataState {
  /** 显示器宽度 */
  monitorWidth: number;
  /** 显示器高度 */
  monitorHeight: number;
}

export class DesktopProcess extends ProcessImpl {
  /** 桌面根dom，类似显示器 */
  private readonly _monitorDom: HTMLElement
  private _isMounted: boolean = false
  private _data = new ObservableImpl<IDesktopDataState>({
    monitorWidth: 0,
    monitorHeight: 0,
  })

  public get monitorDom() {
    return this._monitorDom
  }
  public get isMounted() {
    return this._isMounted
  }
  public get basicSystemProcess() {
    return processManager.findProcessByName<BasicSystemProcess>('basic-system')
  }

  get data() {
    return this._data
  }

  constructor(info: IProcessInfo, dom: HTMLDivElement) {
    super(info)
    console.log('DesktopProcess')
    dom.style.position = 'relative'
    dom.style.overflow = 'hidden'
    dom.style.width = `${window.innerWidth}px`
    dom.style.height = `${window.innerHeight}px`

    this._monitorDom = dom
    this._data.state.monitorWidth = window.innerWidth
    this._data.state.monitorHeight = window.innerHeight
    window.addEventListener('resize', this.onResize)

    this.createDesktopUI()
  }

  private onResize = debounce(() => {
    this._monitorDom.style.width = `${window.innerWidth}px`
    this._monitorDom.style.height = `${window.innerHeight}px`
    this._data.state.monitorWidth = window.innerWidth
    this._data.state.monitorHeight = window.innerHeight
  }, 300)

  private createDesktopUI() {
    if (this._isMounted) return
    const app = createApp(DesktopComponent, { process: this })
    app.use(naiveUi)
    app.mount(this._monitorDom)
    this._isMounted = true
  }

  private initDesktop(dom: HTMLDivElement) {
    const d = document.createElement('desktop-element')
    dom.appendChild(d)
  }

  override destroy() {
    super.destroy()
    window.removeEventListener('resize', this.onResize)
  }
}