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

export default defineComponent({
  name: 'SiderSetting',
  props: {},
  setup() {
    const settings = useSettingsStore()
    return () => (
      <div class="p-4 flex flex-col gap-y-4 ">
        <div
          class={'p-5 bg-[#000000]/[.05] rounded-lg w-full grid grid-rows-1 grid-cols-2 gap-x-3'}
        >
          <div class={'flex flex-col gap-y-2 items-center w-full'}>
            <div
              onClick={() => {
                settings.state.siderDirection = 'left'
              }}
              class={clsx(
                'bg-white flex flex-col h-[92px] w-full p-3 justify-between rounded-lg cursor-pointer border-[1px]  ',
                settings.state.siderDirection === 'left' ? 'border-[#ffa94d]' : 'border-transparent'
              )}
            >
              <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
              <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
              <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
            </div>
            <button
              onClick={() => {
                settings.state.siderDirection = 'left'
              }}
              class={clsx(
                'px-7 py-1 rounded text-[14px]',
                settings.state.siderDirection === 'left'
                  ? 'bg-[#ffa94d] text-white'
                  : 'bg-[#E5E5E5] text-[#999]'
              )}
            >
              左侧
            </button>
          </div>
          <div class={'flex flex-col gap-y-2 items-center'}>
            <div
              onClick={() => {
                settings.state.siderDirection = 'right'
              }}
              class={clsx(
                'bg-white flex items-end w-full flex-col h-[92px] p-3 justify-between rounded-lg cursor-pointer border-[1px]  ',
                settings.state.siderDirection === 'right'
                  ? 'border-[#ffa94d]'
                  : 'border-transparent'
              )}
            >
              <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
              <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
              <div class={'bg-[#E5E5E5] w-[25px] h-[18px] rounded'}></div>
            </div>
            <button
              onClick={() => {
                settings.state.siderDirection = 'right'
              }}
              class={clsx(
                'px-7 py-1 rounded text-[14px]',
                settings.state.siderDirection === 'right'
                  ? 'bg-[#ffa94d] text-white'
                  : 'bg-[#E5E5E5] text-[#999]'
              )}
            >
              左侧
            </button>
          </div>
        </div>
        <SettingItem
          v-slots={{
            label: () => <div>自动隐藏</div>
          }}
        >
          <Switch
            checked={settings.state.showSider === 'auto'}
            onUpdate:checked={(e) => {
              if (e) settings.state.showSider = 'auto'
              else settings.state.showSider = 'show'
            }}
          />
        </SettingItem>{' '}
      </div>
    )
  }
})