<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { type ToolbarAllConfig } from './config/editor-toolbar-config'

interface Props {
  toolGroup: Map<string, ToolbarAllConfig['key']>
}

defineProps<Props>()
const emit = defineEmits<{
  onExecuteCommand: [toolItem: ToolbarAllConfig['key']]
  onToolItemMouseenter: [toolItem: ToolbarAllConfig['key']]
  onToolItemMouseleave: [toolItem: ToolbarAllConfig['key']]
  onSubmenuCmdClick: [toolItemChildCmd: NonNullable<ToolbarAllConfig['key']['submenuCmd']>[0]]
}>()

const { t } = useI18n()

function handleExecuteCommand(toolItem: ToolbarAllConfig['key']) {
  emit('onExecuteCommand', toolItem)
}

function handleToolItemMouseenter(toolItem: ToolbarAllConfig['key']) {
  emit('onToolItemMouseenter', toolItem)
}

function handleToolItemMouseleave(toolItem: ToolbarAllConfig['key']) {
  emit('onToolItemMouseleave', toolItem)
}

function handleSubmenuCmdClick(toolItemChildCmd: NonNullable<ToolbarAllConfig['key']['submenuCmd']>[0]) {
  emit('onSubmenuCmdClick', toolItemChildCmd)
}
</script>

<template>
  <template v-for="[, toolItem] in toolGroup" :key="toolItem.id">
    <NTooltip trigger="manual" :show="toolItem.isShowTooltip" placement="bottom">
      <template #trigger>
        <NPopover
          v-if="toolItem.submenuCmd && toolItem.submenuCmd.length > 0"
          trigger="manual"
          :show="toolItem.isShowPopover"
          placement="bottom"
          :show-arrow="false"
          class="editor-toolbar-popover"
        >
          <template #trigger>
            <div
              :class="{
                'cursor-not-allowed': toolItem.isDisabled,
                'hover:bg-[#cce2fa]': !toolItem.isDisabled,
                '!bg-[#a6ccf7]': toolItem.isActive,
              }"
              class="tool-item mx-[1px] rounded-md px-2 transition-[background] duration-300 ease-linear"
              @mouseenter="handleToolItemMouseenter(toolItem)"
              @mouseleave="handleToolItemMouseleave(toolItem)"
              @click="handleExecuteCommand(toolItem)"
            >
              <i
                class="iconfont text-lg"
                :class="{ [`${toolItem.iconName}`]: true, 'text-[#c2c2c2]': toolItem.isDisabled }"
              />

              <i class="iconfont icon-xiajiantou ml-1 text-xs" />
            </div>
          </template>

          <div>
            <div
              v-for="toolItemChildCmd in toolItem.submenuCmd"
              :key="toolItemChildCmd.command"
              class="mb-[1px] cursor-pointer rounded px-2 py-1 transition"
              :class="toolItemChildCmd.isActive ? ['bg-[#cce2fa]'] : ['hover:bg-[#f5f5f5]']"
              @click="handleSubmenuCmdClick(toolItemChildCmd)"
            >
              <i class="iconfont text-base" :class="{ [`${toolItemChildCmd.iconName}`]: true }" />
              <span class="ml-2">{{ toolItemChildCmd.label }}</span>
            </div>
          </div>
        </NPopover>

        <template v-else-if="['formatBlock'].includes(toolItem.name)">
          <NPopover
            v-if="toolItem.name === 'formatBlock'"
            trigger="manual"
            :show="toolItem.isShowPopover"
            placement="bottom"
            :show-arrow="false"
            class="editor-toolbar-popover"
          >
            <template #trigger>
              <button
                class="duration- flex h-[28px] w-[130px] select-none items-center justify-between rounded-[3px] border-none bg-[#f7f7f7] px-[4px] text-sm text-[#222f3e] transition-[background] ease-linear hover:bg-[#f0f0f0]"
                @mouseenter="handleToolItemMouseenter(toolItem)"
                @mouseleave="handleToolItemMouseleave(toolItem)"
              >
                {{ t('editor_module.title') }}1
              </button>
            </template>

            <div>
              <h1>{{ t('editor_module.title') }}1</h1>
            </div>
          </NPopover>
        </template>

        <div
          v-else
          :class="{
            'cursor-not-allowed': toolItem.isDisabled,
            'hover:bg-[#cce2fa]': !toolItem.isDisabled,
            '!bg-[#a6ccf7]': toolItem.isActive,
          }"
          class="tool-item mx-[1px] rounded-md px-2 transition-[background] duration-300 ease-linear"
          @mouseenter="handleToolItemMouseenter(toolItem)"
          @mouseleave="handleToolItemMouseleave(toolItem)"
          @click="handleExecuteCommand(toolItem)"
        >
          <i
            class="iconfont text-lg"
            :class="{ [`${toolItem.iconName}`]: true, 'text-[#c2c2c2]': toolItem.isDisabled }"
          />
        </div>
      </template>

      <span>{{ toolItem.tooltipText }}</span>
    </NTooltip>
  </template>
</template>
