import { defineStore } from 'pinia'
import { computed, reactive } from 'vue'

export type VisibleState = 'show' | 'auto' | ''

export default defineStore(
  'settings',
  () => {
    const state = reactive({
      backgroundTag: '',
      // 显示隐藏
      showSider: 'show' as VisibleState,
      showDock: 'show' as VisibleState,
      showPet: 'show' as VisibleState,
      showDate: true,
      showTime: true,
      // 尺寸
      blockSize: 6,
      blockPadding: 1,
      mainWidth: 70,
      blockRadius: 1,
      // 搜索
      searchWidth: 30,
      searchRadius: 24
    })
    return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) }
  },
  {
    persist: true
  }
)