import XSystem from '@/core/XSystem.ts'
import type { IconType } from '@/core/desktop/types/IconType.ts'
import { nextTick, onUnmounted, reactive, toRefs } from 'vue'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { useDraggable } from '@vueuse/core'

export function useDesktopInit(container: HTMLElement) {
  const gridTemplate = reactive({
    cellWidth: 90,
    cellHeight: 110,
    gap: 10,
    col: 1,
    row: 1
  })

  const ro = new ResizeObserver(entries => {
    const entry= entries[0]
    const containerRect = entry.contentRect
    gridTemplate.col = Math.floor(containerRect.width / gridTemplate.cellWidth);
    gridTemplate.row = Math.floor(containerRect.height / (gridTemplate.cellHeight));
    console.log(1111)
  })
  ro.observe(container)
  onUnmounted(() => {
    ro.unobserve(container)
  })

  // 有桌面图标的app
  const apps = XSystem.instance.processManages.processInfos.filter(processInfo => !processInfo.isJustProcess)
  console.log(apps)
  const icons: IconType[] = apps.map(processInfo => {
    return {
      name: processInfo.name,
      icon: processInfo.icon,
      path: processInfo.startName,
      col: 0,
      row: 0
    }
  })

  return {
    ...toRefs(gridTemplate),
  }
}