import { computed, defineComponent, ref, toRaw } from 'vue'
import useLayoutStore from '../useLayoutStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdAdd } from 'oh-vue-icons/icons'
import useRouterStore from '@/useRouterStore'
import { globalToast } from '@/main'
import useSortable, { dragging, resetDragging } from './useSortable'
import BlockWrapper from './BlockWrapper'

addIcons(MdAdd)

export default defineComponent(() => {
  const layout = useLayoutStore()
  const router = useRouterStore()
  const container = useSortable(
    computed(() => layout.currentPage.list),
    ref('page')
  )

  return () => (
    <div
      class="absolute left-0 top-0 w-full h-screen overflow-y-auto no-scrollbar pt-[240px] px-[calc((100%_-_var(--main-width))_/_2)]"
      onScroll={(e) => {
        const h = (e.target as any).scrollTop
        if (h > 60) {
          // 需要移动搜索框和时间
          layout.isCompact = true
        } else {
          layout.isCompact = false
        }
      }}
      onDragover={(e) => e.preventDefault()}
      onDrop={() => {
        // 处理移入
        if (!dragging.id) return
        if (dragging.type === 'dock') {
          const oldIdx = layout.state.dock.findIndex((el) => el?.id === dragging.id)
          if (oldIdx < 0) return
          const block = layout.state.dock[oldIdx]
          if (!block) return
          layout.currentPage.list.push(toRaw(block))
          layout.state.dock[oldIdx] = null
          resetDragging()
        } else if (dragging.type && dragging.type !== 'dock') {
          const list = layout.state.dir[dragging.type]?.list
          if (!list) return
          const idx = list.findIndex((el) => el.id === dragging.id)
          if (idx < 0) return
          const block = list[idx]
          layout.currentPage.list.push(toRaw(block))
          list.splice(idx, 1)
          layout.checkDir(dragging.type)
          resetDragging()
        }
      }}
    >
      <div
        class="w-full grid justify-center grid-flow-row-dense pb-[200px]"
        style="grid-template-columns:repeat(auto-fill, var(--block-size));grid-auto-rows:var(--block-size)"
        ref={container}
      >
        {layout.currentPage.list.map((block, idx) => (
          <BlockWrapper key={block.id} idx={idx} block={block} />
        ))}
        <div class="w-full h-full flex justify-center items-center p-[var(--block-padding)] relative operation-button">
          <div
            class="w-full h-full overflow-hidden rounded-[calc(var(--block-radius)_*_var(--block-size))] bg-white/60 backdrop-blur flex justify-center items-center cursor-pointer hover:scale-105 transition-all"
            onClick={() => {
              if (layout.state.content[layout.state.current].pages[layout.state.currentPage]) {
                router.go('global-adder')
              } else {
                globalToast.warning('请先添加页面')
              }
            }}
          >
            <span style="filter:drop-shadow(0 0 10px hsl(32, 90%, 65%))">
              <OhVueIcon name="md-add" fill="white" scale={2.4} />
            </span>
          </div>
        </div>
      </div>
    </div>
  )
})