import SettingItem from '@/settings/SettingItem'
import useSettingsStore 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'
import useLayoutStore from '../useLayoutStore'

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">
        <div class={'flex flex-col'}>
          <span
            class={clsx(
              'text-[14px] font-bold',
              useLayoutStore().state.current === 0 ? 'text-white' : ' text-[#333]'
            )}
          >
            搜索
          </span>
          <span class={'text-[13px] text-[#666] '}>调整搜索样式</span>
          <div
            class={clsx(
              'w-full h-[1px] bg-black/10 mt-1 mb-2',
              useLayoutStore().state.current === 0 ? 'bg-white/10' : ' bg-black/10'
            )}
          ></div>
        </div>
        <SettingItem
          noRoundedB
          v-slots={{
            label: () => <div>搜索栏圆角</div>
          }}
        >
          <div class={' flex items-center  gap-x-2'}>
            <div class={'w-[180px]'}>
              <Slider
                v-model:value={settings.state.searchRadius}
                tooltipOpen={false}
                step={1}
                min={0}
                max={22}
              />
            </div>
            <span class={'text-[#999] w-[30px] flex-0 text-[14px]'}>
              {settings.state.searchRadius}px
            </span>
          </div>
        </SettingItem>
        <SettingItem
          noRoundedT
          v-slots={{
            label: () => <div>搜索栏透明</div>
          }}
        >
          <div class={' flex items-center gap-x-2'}>
            <div class={'w-[180px]'}>
              <Slider
                v-model:value={settings.state.searchOpacity}
                step={0.01}
                min={0.1}
                tooltipOpen={false}
                max={0.75}
              />
            </div>
            <span class={'text-[#999] w-[30px]  text-[14px]'}>{settings.state.searchOpacity}</span>
          </div>
        </SettingItem>
        <SettingItem
          v-slots={{
            label: () => <div>搜索历史</div>
          }}
        >
          <Switch v-model:checked={settings.state.showHistory} />
        </SettingItem>{' '}
        <SettingItem
          v-slots={{
            label: () => <div>搜索引擎</div>
          }}
        >
          <Select
            value={searchStore.current.name}
            onUpdate:value={(e) => {
              searchStore.selectSearchByName(e as string)
            }}
            style={{ width: 100 }}
            options={options1.value}
          />
        </SettingItem>
      </div>
    )
  }
})