import SettingItem from '@/settings/SettingItem'
import useSettingsStore from '@/settings/useSettingsStore'
import { Radio, Switch } from 'ant-design-vue'
import clsx from 'clsx'
import { defineComponent, watch } from 'vue'
import useLayoutStore from '../useLayoutStore'
import { sendParent } from '@/utils/parent'

export default defineComponent({
  setup() {
    const settings = useSettingsStore()
    const layout = useLayoutStore()
    watch(
      () => ({
        autoSearch: settings.state.autoUseAi === 'show',
        showTabButton: settings.state.showPetOnTab,
        isSearch: settings.state.autoUseAi === ''
      }),
      (val) => {
        sendParent([
          'configAI',
          {
            autoSearch: val.autoSearch,
            showTabButton: val.showTabButton,
            isSearch: val.isSearch
          }
        ])
      },
      {
        immediate: true
      }
    )
    return () => (
      <div class="p-4 flex flex-col  ">
        <div class={'flex flex-col'}>
          <span
            class={clsx(
              'text-[14px] font-bold',
              useLayoutStore().state.current === 0 ? 'text-white' : ' text-[#333]'
            )}
          >
            AI助手
          </span>
          <span class={'text-[13px] text-[#666] '}>设置AI助手样式</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>
        <span
          class={clsx(
            'text-[14px] font-bold my-2',
            useLayoutStore().state.current === 0 ? 'text-white' : 'text-[#333]'
          )}
        >
          功能开关
        </span>
        <SettingItem
          v-slots={{
            label: () => <div>标签页助手</div>
          }}
          noRoundedB
          desc="fatfox标签页内的小助手"
        >
          <Switch
            checked={settings.state.showPet}
            onUpdate:checked={(e) => {
              if (e) settings.state.showPet = true
              else settings.state.showPet = false
            }}
          />
        </SettingItem>
        <SettingItem
          v-slots={{
            label: () => <div>标签页助手</div>
          }}
          desc="fatfox标签页内的小助手"
          noRoundedT
        >
          <Switch
            checked={settings.state.showPetOnTab}
            onUpdate:checked={(e) => {
              if (e) settings.state.showPetOnTab = true
              else settings.state.showPetOnTab = false
            }}
          />
        </SettingItem>
        <span
          class={clsx(
            'text-[14px] font-bold my-2',
            useLayoutStore().state.current === 0 ? 'text-white' : 'text-[#333]'
          )}
        >
          结果增强
        </span>
        <SettingItem
          v-slots={{
            label: () => <div>结果增强开关</div>
          }}
          desc="使用搜索引擎时，Fatfox会给您更多有效的结果"
        >
          <Switch
            checked={settings.state.autoUseAi !== ''}
            onUpdate:checked={(e) => {
              if (e) settings.state.autoUseAi = 'show'
              else settings.state.autoUseAi = ''
            }}
          />
        </SettingItem>

        <div
          class={clsx('flex  w-full py-2 px-3 rounded-lg flex-col', {
            'bg-black/5': useLayoutStore().state.current !== 0,
            'bg-white/10': useLayoutStore().state.current === 0
          })}
        >
          <span>何时使用结果增强</span>
          <SettingItem
            v-slots={{
              label: () => <div>每次询问</div>
            }}
            noBg
            desc="每次搜索直接询问fatfox"
          >
            <Radio
              checked={settings.state.autoUseAi === 'show'}
              onClick={() => {
                settings.state.autoUseAi = 'show'
              }}
              onUpdate:checked={(e) => {
                if (e) settings.state.showSider = 'auto'
                else settings.state.showSider = 'show'
              }}
            />
          </SettingItem>
          <SettingItem
            v-slots={{
              label: () => <div>手动询问</div>
            }}
            noBg
            desc="每次搜索，提示您进行手动查询"
          >
            <Radio
              checked={settings.state.autoUseAi === 'auto'}
              onClick={() => {
                settings.state.autoUseAi = 'auto'
              }}
            />
          </SettingItem>
        </div>
      </div>
    )
  }
})