import { defineStore } from 'pinia'
import type { Layout } from './layout.types'
import { computed, reactive, ref, toRaw, watch } from 'vue'
import db from '@/db'
import useResource from './background/useResource'

const defaultLayout: Layout = {
  content: [
    { background: '', pages: [] },
    { background: '', pages: [] },
    { background: '', pages: [] }
  ],
  current: 0,
  currentPage: 0,
  dir: {},
  dock: [null, null, null, null, null, null, null, null, null, null],
  simple: false
}

export default defineStore('layout', () => {
  const state = reactive(defaultLayout)
  const ready = ref(false)
  db.getItem<Layout>('layout').then((res) => {
    if (res) {
      Object.assign(state, res)
    }
    ready.value = true
  })
  watch(
    [ready, state],
    ([re, s]) => {
      if (!re) return
      db.setItem('layout', toRaw(s))
    },
    { deep: true }
  )
  watch(
    () => state.current,
    () => {
      state.currentPage = 0
    }
  )
  const currentMode = computed(() => state.content[state.current])
  const currentPage = computed(() => {
    return (
      currentMode.value.pages[state.simple ? 0 : state.currentPage] || {
        list: [],
        label: '',
        name: ''
      }
    )
  })

  const background = useResource(
    computed(() => state.content[state.current]?.background || ''),
    'background'
  )
  // 是让时间和搜索改变位置，使画面更紧凑 —— @/layout/grid
  const isCompact = ref(false)
  return {
    state,
    ready,
    currentMode,
    currentPage,
    isCompact,
    background
  }
})