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

const defaultLayout: Layout = {
  content: [[], [], []],
  current: 0,
  currentPage: 0,
  dir: {},
  dock: [null, null, null, null, null, null, null, null, null, null],
  simple: false,
  loading: true
}

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
    }
  )
  return {
    state,
    ready
  }
})