<script setup lang="ts">
import { readonly, ref, useTemplateRef, watch } from 'vue'
import { templateMenuConfigFactory } from '../data/template-menu'
import { useFocus } from '@vueuse/core'
import type { TemplateMenuConfig } from '@/views/home/components/rich-text-input-box/data/template-menu'

const showTemplateMenu = defineModel<boolean>('showTemplateMenu', { default: false })

const emit = defineEmits<{
  templateConfirm: [templateConfig: TemplateMenuConfig['templateList'][0]]
}>()

const templateMenuContainerRef = useTemplateRef<HTMLParagraphElement>('templateMenuContainerRef')
const { focused: templateMenuContainerFocus } = useFocus(templateMenuContainerRef)

const templateMenuConfig = readonly<TemplateMenuConfig[]>(templateMenuConfigFactory())
const currentTemplateCategory = ref<string>('Work')

watch(
  () => showTemplateMenu.value,
  (isShow) => {
    if (isShow) {
      currentTemplateCategory.value = 'Work'

      templateMenuContainerFocus.value = true
    }
  },
)

watch(
  () => templateMenuContainerFocus.value,
  (isFocus) => {
    if (!isFocus) {
      showTemplateMenu.value && (showTemplateMenu.value = false)
    }
  },
)

function handleTemplateSelect(templateItem: Readonly<TemplateMenuConfig['templateList'][0]>) {
  emit('templateConfirm', templateItem)

  showTemplateMenu.value = false
}
</script>

<template>
  <div ref="templateMenuContainerRef" class="absolute" tabindex="0">
    <Transition name="template-menu">
      <div
        v-show="showTemplateMenu"
        class="z-99 absolute bottom-0 left-0 h-fit w-[514px] select-none rounded-[10px] border border-[#9EA3FF] bg-white px-[12px]"
      >
        <n-tabs
          :value="currentTemplateCategory"
          size="medium"
          animated
          :on-update:value="(value: string) => (currentTemplateCategory = value)"
        >
          <n-tab-pane
            v-for="templateCategoryItem in templateMenuConfig"
            :key="templateCategoryItem.category"
            :name="templateCategoryItem.category"
            :tab="templateCategoryItem.title"
          >
            <n-scrollbar x-scrollable>
              <ul class="flex select-none pb-[12px]">
                <li
                  v-for="(templateItem, index) in templateCategoryItem.templateList"
                  :key="index"
                  class="mr-[15px] w-[120px] cursor-pointer rounded-[10px] border border-[#9EA3FF] bg-[#E0E1FF] p-[7px] last:mr-0"
                  @click="handleTemplateSelect(templateItem)"
                >
                  <div class="flex items-center">
                    <!-- <span class="size-[20px]"></span> -->
                    <span class="flex-center inline-flex rounded-[4px] bg-[#8e83f1] px-[4px]">
                      <i class="iconfont text-[12px] text-white" :class="{ [`${templateItem.icon}`]: true }"></i>
                    </span>

                    <span class="ml-[5px] flex-1 overflow-hidden text-[12px]">
                      <n-ellipsis>{{ templateItem.title }}</n-ellipsis>
                    </span>
                  </div>

                  <div class="mt-[6px] w-full overflow-hidden text-[10px] text-[#999]">
                    <n-ellipsis>{{ templateItem.doc }}</n-ellipsis>
                  </div>
                </li>
              </ul>
            </n-scrollbar>
          </n-tab-pane>
        </n-tabs>
      </div>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.template-menu-enter-active,
.template-menu-leave-active {
  transition-timing-function: ease-in-out;
  transition-duration: 0.3s;
  transition-property: opacity;
}

.template-menu-enter-from,
.template-menu-leave-to {
  overflow: 1;
  opacity: 0;
}
</style>
