import * as React from 'react'
import type { MarkdownEditorHandle } from './EditorPane'

const BUTTONS: { id: string; label: string }[] = [
  { id: 'h1', label: 'H1' },
  { id: 'h2', label: 'H2' },
  { id: 'h3', label: 'H3' },
  { id: 'h4', label: 'H4' },
  { id: 'h5', label: 'H5' },
  { id: 'h6', label: 'H6' },
  { id: 'bold', label: '加粗' },
  { id: 'italic', label: '斜体' },
  { id: 'strike', label: '删除线' },
  { id: 'code', label: '行内代码' },
  { id: 'codeBlock', label: '代码块' },
  { id: 'link', label: '链接' },
  { id: 'image', label: '图片' },
  { id: 'ul', label: '无序列表' },
  { id: 'ol', label: '有序列表' },
  { id: 'task', label: '任务' },
  { id: 'quote', label: '引用' },
  { id: 'hr', label: '分隔线' },
  { id: 'table', label: '表格' },
  { id: 'mark', label: '高亮' },
  { id: 'color', label: '颜色' },
  { id: 'sup', label: '上标' },
  { id: 'sub', label: '下标' },
  { id: 'kbd', label: '按键' },
  { id: 'details', label: '折叠' },
  { id: 'footnote', label: '脚注' }
]

type Props = {
  editorRef: React.RefObject<MarkdownEditorHandle | null>
}

export function MarkdownFormatToolbar({ editorRef }: Props): React.ReactElement {
  return (
    <div className="md-format-wrap">
      <div className="md-format-bar">
        {BUTTONS.map((b) => (
          <button
            key={b.id}
            type="button"
            title={b.label}
            onClick={() => void editorRef.current?.applyAction(b.id)}
          >
            {b.label}
          </button>
        ))}
      </div>
    </div>
  )
}