<template>
  <div class="editor-toolbar">
    <a-space :size="4">
      <!-- 标题 -->
      <a-dropdown :trigger="['click']">
        <a-button type="text" size="small" title="标题">
          <template #icon><span style="font-weight: bold; font-size: 14px;">H</span></template>
        </a-button>
        <template #overlay>
          <a-menu @click="({ key }) => triggerAction('heading', key)">
            <a-menu-item :key="1"><span style="font-size: 1.6em; font-weight: bold;">H1 标题</span></a-menu-item>
            <a-menu-item :key="2"><span style="font-size: 1.4em; font-weight: bold;">H2 标题</span></a-menu-item>
            <a-menu-item :key="3"><span style="font-size: 1.2em; font-weight: bold;">H3 标题</span></a-menu-item>
            <a-menu-item :key="4"><span style="font-size: 1.1em; font-weight: bold;">H4 标题</span></a-menu-item>
            <a-menu-item :key="5"><span style="font-size: 1em; font-weight: bold;">H5 标题</span></a-menu-item>
            <a-menu-item :key="6"><span style="font-size: 0.9em; font-weight: bold; color: var(--text-color-secondary);">H6 标题</span></a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

      <a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />

      <!-- 文本样式 -->
      <a-button type="text" size="small" @click="triggerAction('bold')" title="加粗 (Ctrl+B)">
        <template #icon><BoldOutlined /></template>
      </a-button>
      <a-button type="text" size="small" @click="triggerAction('italic')" title="斜体 (Ctrl+I)">
        <template #icon><ItalicOutlined /></template>
      </a-button>
      <a-button type="text" size="small" @click="triggerAction('strike')" title="删除线">
        <template #icon><StrikethroughOutlined /></template>
      </a-button>

      <a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />

      <!-- 引用与代码 -->
      <a-button type="text" size="small" @click="triggerAction('quote')" title="引用">
        <template #icon><MessageOutlined /></template>
      </a-button>
      <a-button type="text" size="small" @click="triggerAction('inlineCode')" title="行内代码">
        <template #icon><CodeOutlined /></template>
      </a-button>
      <a-button type="text" size="small" @click="triggerAction('link')" title="链接">
        <template #icon><LinkOutlined /></template>
      </a-button>

      <a-divider type="vertical" style="height: 1.2em; background-color: var(--border-color);" />

      <!-- 列表 -->
      <a-button type="text" size="small" @click="triggerAction('unorderedList')" title="无序列表">
        <template #icon><UnorderedListOutlined /></template>
      </a-button>
      <a-button type="text" size="small" @click="triggerAction('orderedList')" title="有序列表">
        <template #icon><OrderedListOutlined /></template>
      </a-button>
    </a-space>
  </div>
</template>

<script setup>
import { 
  BoldOutlined,
  ItalicOutlined,
  StrikethroughOutlined,
  CodeOutlined,
  MessageOutlined,
  UnorderedListOutlined,
  OrderedListOutlined,
  LinkOutlined
} from '@ant-design/icons-vue';
import { useEditor } from '../composables/useEditor';

const { triggerAction } = useEditor();
</script>

<style scoped>
.editor-toolbar {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--card-background);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
</style>