import {
  computed,
  defineComponent,
  provide,
  ref,
  Transition,
  type InjectionKey,
  type Ref
} from 'vue'
import AdderPageBack from './AdderPageBack'
import useLayoutStore from '../useLayoutStore'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { MdKeyboardcommandkey, FaCompass, FaPencilRuler } from 'oh-vue-icons/icons'
import CustomAdder from './CustomAdder'
import clsx from 'clsx'
import ThemeProvider from '@/utils/ThemeProvider'
import WidgetAdder from './WidgetAdder'
import { Form, Input, Select } from 'ant-design-vue'
addIcons(MdKeyboardcommandkey, FaCompass, FaPencilRuler)

const ItemButton = defineComponent({
  props: {
    name: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  emits: ['click'],
  setup(props, ctx) {
    const layout = useLayoutStore()
    const isGame = computed(() => layout.state.current === 0)
    return () => (
      <div
        onClick={() => {
          ctx.emit('click')
        }}
        class={
          'py-4 px-4 mb-2  rounded text-sm cursor-pointer transition-all relative ' +
          (isGame.value
            ? props.active
              ? 'bg-[#626471] text-[#f7a94e]'
              : 'hover:text-[#f7a94e] hover:bg-white/20 text-[#b4b5bb]'
            : props.active
              ? 'bg-white text-black/80 shadow'
              : 'hover:text-black/80 hover:bg-white text-black/50')
        }
      >
        {props.active && (
          <img
            src="/icons/work_add_main_checked.png"
            class={'absolute h left-0 top-1/2 -translate-y-1/2  w-[8px] h-[34px]'}
          ></img>
        )}

        <OhVueIcon name={props.name} class={"ml-1"} />
        <span class="ml-2">{props.label}</span>
      </div>
    )
  }
})

export const AddToToken = Symbol('addTo') as InjectionKey<Ref<number>>

export default defineComponent(() => {
  const layout = useLayoutStore()
  const isGame = computed(() => layout.state.current === 0)
  const type = ref(1)
  const addTo = ref(layout.state.currentPage)
  provide(AddToToken, addTo)
  return () => (
    <div
      class={clsx('w-full h-full relative flex p-[6px]', isGame.value && 'bg-[#2c2e3e]')}
      style={{
        backgroundImage: `url('/bg/gameModel.png')`,
        backgroundSize: '100% 100%'
      }}
    >
      <ThemeProvider dark={isGame.value}>
        <div
          class={
            'w-[220px] h-full relative z-10 pt-[100px]  rounded-2xl ' +
            (isGame.value ? 'pl-8 pr-2 bg-[#424b5d4d]' : 'bg-white/60 l backdrop-blur px-4')
          }
        >
          <ItemButton
            name="md-keyboardcommandkey"
            label="功能组件"
            active={type.value === 0}
            onClick={() => {
              type.value = 0
            }}
          />
          <ItemButton
            name="fa-compass"
            label="网站图标"
            active={type.value === 1}
            onClick={() => {
              type.value = 1
            }}
          />
          <ItemButton
            name="fa-pencil-ruler"
            label="自定义网址"
            active={type.value === 2}
            onClick={() => {
              type.value = 2
            }}
          />
        </div>
        <div
          class={
            'w-0 h-full flex-grow relative z-10 flex flex-col ' +
            (isGame.value ? '' : 'bg-white/80 backdrop-blur')
          }
          onContextmenu={(e) => e.stopPropagation()}
        >
          <Form class="w-full px-4 mt-4" layout="inline">
            <Form.Item label="添加到">
              <Select
                style="width: 140px"
                v-model:value={addTo.value}
                options={layout.currentMode.pages.map((el, idx) => ({
                  label: el.label,
                  value: idx
                }))}
              />
            </Form.Item>
            <Form.Item>
              <Input.Search class="w-[200px]" placeholder="搜索组件或网站" />
            </Form.Item>
          </Form>
          <div class="w-full h-0 flex-grow p-6">
            <div class="w-full h-full relative">
              <Transition>
                {type.value === 0 ? <WidgetAdder /> : type.value === 1 ? '' : <CustomAdder />}
              </Transition>
            </div>
          </div>
        </div>
      </ThemeProvider>
    </div>
  )
})