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

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

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,
      showDate: true,
      showTime: true,
      showAdder: true,
      // 尺寸
      blockSize: 6,
      blockPadding: 1,
      mainWidth: 70,
      blockRadius: 0.2,
      showBlockLabel: true,
      // 搜索
      searchWidth: 30,
      searchRadius: 24
    })
    return { state, blockInner: computed(() => state.blockSize - 2 * state.blockPadding) }
  },
  {
    persist: true
  }
)