<template>
  <n-config-provider :config-provider-props="configProviderProps" class="w-full h-full pos-relative">
    <div ref="desktopRootDom" class="desktop-root">
      <div class="desktop-container">
        <div v-for="icon in iconArr" class="icon-container">{{ icon.icon }}</div>
      </div>
      <div class="task-bar"></div>
    </div>
  </n-config-provider>
</template>

<script setup lang="ts">
import type { DesktopProcess } from '@/core/desktop/DesktopProcess.ts'
import XSystem from '@/core/XSystem.ts'
import { notificationApi } from '@/core/common/naive-ui/discrete-api.ts'
import { configProviderProps } from '@/core/common/naive-ui/theme.ts'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { useIconDrag } from '@/core/desktop/utils/useIconDrag.ts'
import { onMounted } from 'vue'
import type { IconType } from '@/core/desktop/types/IconType.ts'
import { useDesktopInit } from '@/core/desktop/ui/useDesktopInit.ts'

const props = defineProps<{process: DesktopProcess}>()
console.log(props.process)

const iconArr: IconType[] = [
  {
    name: '文件管理器',
    icon: '🗂',
    path: '/',
    col: 1,
    row: 1
  },
  {
    name: '浏览器',
    icon: '🌐',
    path: '/',
    col: 1,
    row: 2
  },
  {
    name: '记事本',
    icon: '📄',
    path: '/',
    col: 1,
    row: 3
  },
  {
    name: '音乐播放器',
    icon: '🎵',
    path: '/',
    col: 1,
    row: 4
  }
]

XSystem.instance.eventManages.addEventListener(DesktopEventEnum.onDesktopRootDomResize, (width, height) => {
  console.log(width, height)
  notificationApi.create({ title: '桌面通知', content: `桌面尺寸变化${width}x${height}}`, duration: 2000 })
})

const iconsInit = () => {
  const icons = document.querySelectorAll<HTMLDivElement>('div.icon-container')
  const container = document.querySelector<HTMLDivElement>('.desktop-container')!
  icons.forEach((icon: HTMLDivElement) => {
    useIconDrag(icon, container)
  })
}
onMounted(() => {
  const container = document.querySelector<HTMLDivElement>('.desktop-container')!
  console.log(container.getBoundingClientRect())
  // iconsInit()
  const { col, row } = useDesktopInit(container)
  console.log(col.value, row.value)
})
</script>

<style lang="scss" scoped>
$icon-width: 80px;
$icon-height: 110px;

.desktop-root {
  @apply w-full h-full flex flex-col;

  .desktop-container {
    @apply w-full flex-1 grid gap-4 grid-auto-flow-col p-4 pos-relative;
    grid-template-columns: repeat(auto-fill, minmax($icon-width, 1fr));
    grid-template-rows: repeat(auto-fill, minmax($icon-height, 1fr));

    .icon-container {
      width: $icon-width;
      height: $icon-height;
      @apply flex flex-col items-center justify-center rounded text-white bg-gray-200;
    }
  }

  .task-bar {
    @apply w-full h-[40px] bg-gray-200;
  }
}
</style>
