import React, { useCallback } from 'react'
import type { Editor } from '@milkdown/core'
import { callCommand } from '@milkdown/utils'
import type { $Command } from '@milkdown/utils'
import {
  toggleStrongCommand,
  toggleEmphasisCommand,
  wrapInHeadingCommand,
  wrapInBlockquoteCommand,
  wrapInBulletListCommand,
  wrapInOrderedListCommand,
  createCodeBlockCommand,
  toggleInlineCodeCommand,
  insertImageCommand,
  toggleLinkCommand,
  insertHrCommand
} from '@milkdown/preset-commonmark'
import { toggleStrikethroughCommand } from '@milkdown/preset-gfm'

interface EditorToolbarProps {
  action: (fn: (editor: Editor) => void) => void
}

export const EditorToolbar = React.memo(function EditorToolbar({ action }: EditorToolbarProps) {
  const exec = useCallback(<T,>(command: $Command<T>, payload?: T) => {
    action((editor) => {
      try {
        editor.action(callCommand(command.key, payload))
      } catch {
        // command may not be registered
      }
    })
  }, [action])

  const handleHeading = useCallback((level: number) => {
    exec(wrapInHeadingCommand, level)
  }, [exec])

  return (
    <div className="editor-toolbar" role="toolbar" aria-label="Markdown格式工具">
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(toggleStrongCommand)}
        title="粗体 (Ctrl+B)"
        aria-label="粗体"
      >
        <strong>B</strong>
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(toggleEmphasisCommand)}
        title="斜体 (Ctrl+I)"
        aria-label="斜体"
      >
        <em>I</em>
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(toggleStrikethroughCommand)}
        title="删除线"
        aria-label="删除线"
      >
        <s>S</s>
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(toggleInlineCodeCommand)}
        title="行内代码"
        aria-label="行内代码"
      >
        {'</>'}
      </button>
      <div className="toolbar-divider-sm" role="separator" />
      <button
        className="toolbar-btn-sm"
        onClick={() => handleHeading(1)}
        title="标题"
        aria-label="一级标题"
      >
        H1
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => handleHeading(2)}
        title="二级标题"
        aria-label="二级标题"
      >
        H2
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => handleHeading(3)}
        title="三级标题"
        aria-label="三级标题"
      >
        H3
      </button>
      <div className="toolbar-divider-sm" role="separator" />
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(wrapInBulletListCommand)}
        title="无序列表"
        aria-label="无序列表"
      >
        •≡
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(wrapInOrderedListCommand)}
        title="有序列表"
        aria-label="有序列表"
      >
        1.
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(wrapInBlockquoteCommand)}
        title="引用"
        aria-label="引用"
      >
        ❝
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(createCodeBlockCommand)}
        title="代码块"
        aria-label="代码块"
      >
        {'{ }'}
      </button>
      <div className="toolbar-divider-sm" role="separator" />
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(toggleLinkCommand, { href: '', title: '' })}
        title="链接"
        aria-label="插入链接"
      >
        🔗
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(insertImageCommand, { src: '', alt: '' })}
        title="图片"
        aria-label="插入图片"
      >
        🖼
      </button>
      <button
        className="toolbar-btn-sm"
        onClick={() => exec(insertHrCommand)}
        title="分割线"
        aria-label="插入分割线"
      >
        —
      </button>
    </div>
  )
})

EditorToolbar.displayName = 'EditorToolbar'
