import SettingItem from '@/settings/SettingItem'
import useSettingsStore, { type TimeUnit } from '@/settings/useSettingsStore'
import { Select, Slider, Switch, type SelectProps } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
import useSearchConfigStore from '../header/search/useSearchConfigStore'
import clsx from 'clsx'
const list: {
  label: string
  value: TimeUnit
}[] = [
  {
    label: '日&月',
    value: 'date'
  },
  {
    label: '周',
    value: 'week'
  },
  {
    label: '秒',
    value: 'second'
  },
  {
    label: '农历',
    value: 'lunal'
  },
  {
    label: '12小时制',
    value: '12hour'
  }
]
export default defineComponent({
  setup() {
    const settings = useSettingsStore()
    const searchStore = useSearchConfigStore()
    const options1 = ref<SelectProps['options']>(
      [...searchStore.defaultList, ...searchStore.customList].map((item) => ({
        value: item.name,
        label: item.name
      }))
    )
    return () => (
      <div class="p-4">
        <SettingItem
          v-slots={{
            label: () => <div>显示时间</div>
          }}
        >
          <Switch v-model:checked={settings.state.showTime} />
        </SettingItem>{' '}
        <div class={'flex flex-col gap-y-1'}>
          <span class={'text-[14px] font-bold text-[#333]'}>时间的样式</span>
          <div class={'p-3 bg-[#000000]/[.05] rounded-lg grid gap-2 grid-rows-2 grid-cols-4'}>
            {list.map((item) => (
              <div
                onClick={() => {
                  if (settings.state.timeOptions.includes(item.value)) {
                    settings.state.timeOptions = settings.state.timeOptions.filter(
                      (el) => el !== item.value
                    )
                  } else {
                    settings.state.timeOptions.push(item.value)
                  }
                }}
                class={clsx(
                  '  items-center justify-center flex rounded py-1 cursor-pointer',
                  settings.state.timeOptions.includes(item.value)
                    ? 'bg-[#ffa93d] text-white'
                    : 'bg-black/[0.05] text-[#999] '
                )}
              >
                {item.label}
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
})
