import SettingItem from '@/settings/SettingItem'
import useSettingsStore from '@/settings/useSettingsStore'
import { Select, Switch } from 'ant-design-vue'
import clsx from 'clsx'
import { defineComponent } from 'vue'
import useLayoutStore from '../useLayoutStore'

export default defineComponent({
  name: 'SiderSetting',
  props: {},
  setup() {
    const settings = useSettingsStore()
    const layout = useLayoutStore()

    return () => (
      <div class="p-4 flex flex-col gap-y-1 ">
        <SettingItem
          v-slots={{
            label: () => <div>快捷栏开关</div>
          }}
        >
          <Switch
            checked={settings.state.showDock === ''}
            onUpdate:checked={(e) => {
              if (e) settings.state.showDock = ''
              else settings.state.showDock = 'show'
            }}
          />
        </SettingItem>{' '}
        <SettingItem
          v-slots={{
            label: () => <div>自动隐藏</div>
          }}
        >
          <Switch
            checked={settings.state.showDock === 'auto'}
            onUpdate:checked={(e) => {
              if (e) settings.state.showDock = 'auto'
              else settings.state.showDock = 'show'
            }}
          />
        </SettingItem>{' '}
        <div class={'flex flex-col  text-[#333]'}>
          <span class={'font-bold'}>快捷键设置</span>
          <p class={'text-[12px] text-[#999]'}>选中要更换快捷键的目标，点击键盘即可更换快捷键</p>
          <div class={'w-full h-[1px] bg-[#ddd] mt-2'}></div>
          <div class={'w-full grid grid-rows-5 grid-cols-2 gap-2 p-2'}>
            {layout.state.dockLabels.split('').map((val, idx) => (
              <div class="w-full flex gap-x-4">
                <span>{idx + 1}</span>
                <div class={'flex-1 bg-slate-50 rounded'}>

                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    )
  }
})