import { Button,  Slider } from 'ant-design-vue'
import { defineComponent, ref, Transition, watch } from 'vue'
import useLayoutStore from '../useLayoutStore'
import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-design/icons-vue'
import SettingItem from '@/settings/SettingItem'
import useSettingsStore from '@/settings/useSettingsStore'
import useRouterStore from '@/useRouterStore'
import clsx from 'clsx'

export default defineComponent(() => {
  const layout = useLayoutStore()
  const router = useRouterStore()

  const selected = ref(0)
  watch(
    () => layout.state.current,
    (val) => {
      selected.value = val
    },
    { immediate: true }
  )

  const settings = useSettingsStore()
  return () => (
    <div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto scrollbar-hide">
      {/* <SettingItem
        noBg
        v-slots={{
          label: () => <div>所属模式</div>
        }}
      >
        <Select
          class="w-[100px]"
          options={[
            { label: '游戏', value: 0 },
            { label: '工作', value: 1 },
            { label: '休闲', value: 2 }
          ]}
          v-model:value={selected.value}
        />
      </SettingItem> */}
      <div class="px-4">
        <div class="h-[180px]">
          {layout.background.video && layout.background.type !== 'own' ? (
            <video class="w-full h-full" src={layout.background.video} autoplay={false} controls />
          ) : (
            <div
              class="w-full h-full bg-center bg-no-repeat bg-cover"
              style={{
                backgroundImage: `url('${layout.background.image}')`
              }}
            ></div>
          )}
        </div>
        <div class="flex justify-between items-center py-4">
          <Button
            type="primary"
            icon={<SwapOutlined />}
            onClick={() => {
              router.go('global-background')
            }}
          >
            更换壁纸
          </Button>
          <Button
            type="text"
            class={clsx(useLayoutStore().state.current === 0 && 'text-white')}
            icon={<DownloadOutlined />}
            onClick={() => {
              window.open(layout.background.video || layout.background.image, '_blank')
            }}
          >
            下载壁纸
          </Button>
        </div>
      </div>
      <SettingItem
        noRoundedB
        v-slots={{
          label: () => <div>遮罩浓度</div>
        }}
      >
        <div class={'w-[200px]'}>
          <Slider
            v-model:value={settings.state.maskOpacity}
            step={0.01}
            tooltipOpen={false}
            min={0}
            max={0.7}
          />
        </div>
      </SettingItem>
      <SettingItem
        noRoundedT
        v-slots={{
          label: () => <div>遮罩模糊</div>
        }}
      >
        <div class={'w-[200px]'}>
          <Slider
            v-model:value={settings.state.maskFilter}
            step={0.1}
            tooltipOpen={false}
            min={0}
            max={20}
          />
        </div>
      </SettingItem>
      <Transition>
        {(settings.state.maskFilter > 0 || settings.state.maskOpacity > 0) && (
          <div
            class="flex justify-end mr-4"
            onClick={() => {
              settings.state.maskOpacity = 0
              settings.state.maskFilter = 0
            }}
          >
            <Button type="text" icon={<EyeInvisibleOutlined />}>
              隐藏遮罩
            </Button>
          </div>
        )}
      </Transition>
    </div>
  )
})