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

export type VisibleState = 'show' | 'auto' | ''
export type TimeUnit = 'date' | 'week' | '12hour' | 'lunal' | 'second';
export default defineStore(
  'settings',
  () => {
    const state = reactive({
      // 是否用过
      used: false,
      maskOpacity: 0,
      maskFilter: 0,
      // 显示隐藏
      showSider: 'show' as VisibleState,
      showDock: 'show' as VisibleState,
      showPet: 'show' as VisibleState,
      showTime: true,
      timeOptions: ['date', 'week', '12hour', 'lunal', 'second'] as TimeUnit[],
      showAdder: true,
      showHistory: true,
      // 尺寸
      blockSize: 6.7,
      blockPadding: 1,
      mainWidth: 70,
      blockRadius: 0.2,
      showBlockLabel: true,
      // 搜索
      searchWidth: 30,
      searchRadius: 12,
      searchOpacity: 0.75,
      // 侧边栏
      siderDirection: 'left' as 'left' | 'right',

    })
    return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) }
  },
  {
    persist: true
  }
)