import { Button, Select, Slider } from 'ant-design-vue'
import { computed, defineComponent, ref, Transition, watch } from 'vue'
import useLayoutStore from '../useLayoutStore'
import Rect from '@/utils/Rect'
import useResource from './useResource'
import { DownloadOutlined, EyeInvisibleOutlined, SwapOutlined } from '@ant-design/icons-vue'
import SettingItem from '@/settings/SettingItem'
import useSettingsStore from '@/settings/useSettingsStore'
import { v4 as uuid } from 'uuid'
import useRouterStore from '@/useRouterStore'

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

  const selected = ref(0)
  watch(
    () => layout.state.current,
    (val) => {
      selected.value = val
    },
    { immediate: true }
  )
  const resource = useResource(
    computed(() => layout.state.content[selected.value].background),
    'background'
  )
  const settings = useSettingsStore()
  return () => (
    <div class="absolute left-0 top-0 w-full h-full p-4 overflow-y-auto">
      <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]">
          {resource.video && resource.type !== 'own' ? (
            <video class="w-full h-full" src={resource.video} autoplay={false} controls />
          ) : (
            <div
              class="w-full h-full bg-center bg-no-repeat bg-cover"
              style={{
                backgroundImage: `url('${resource.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"
            icon={<DownloadOutlined />}
            onClick={() => {
              window.open(resource.video || resource.image, '_blank')
            }}
          >
            下载壁纸
          </Button>
        </div>
      </div>
      <SettingItem
        noRoundedB
        v-slots={{
          label: () => <div>遮罩浓度</div>
        }}
      >
        <Slider
          v-model:value={settings.state.maskOpacity}
          step={0.01}
          tooltipOpen={false}
          min={0}
          max={0.7}
        />
      </SettingItem>
      <SettingItem
        noRoundedT
        v-slots={{
          label: () => <div>遮罩模糊</div>
        }}
      >
        <Slider
          v-model:value={settings.state.maskFilter}
          step={0.1}
          tooltipOpen={false}
          min={0}
          max={20}
        />
      </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>
  )
})