import { computed, defineComponent, ref, Transition } 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'
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-2 px-4 mb-2 rounded-lg text-sm cursor-pointer transition-all ' +
          (isGame.value
            ? props.active
              ? 'bg-[#626471] text-[#f7a94e]'
              : 'hover:text-[#f7a94e] text-[#b4b5bb]'
            : props.active
              ? 'bg-white text-black/80 shadow'
              : 'hover:text-black/80 hover:bg-white text-black/50')
        }
      >
        <OhVueIcon name={props.name} />
        <span class="ml-2">{props.label}</span>
      </div>
    )
  }
})

export default defineComponent(() => {
  const layout = useLayoutStore()
  const isGame = computed(() => layout.state.current === 0)
  const type = ref(1)
  return () => (
    <div class="w-full h-full relative flex">
      {isGame.value && <AdderPageBack />}
      <div
        class={
          'w-[200px] h-full relative z-10 pt-[100px] ' +
          (isGame.value ? 'pl-6 pr-2' : 'bg-white/60 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/40 backdrop-blur')
        }
        onContextmenu={(e) => e.stopPropagation()}
      >
        <div class="w-full h-[60px]"></div>
        <div class="w-full h-0 flex-grow p-6">
          <div class="w-full h-full relative">
            <Transition>
              {type.value === 0 ? '' : type.value === 1 ? '' : <CustomAdder />}
            </Transition>
          </div>
        </div>
      </div>
    </div>
  )
})