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

const GROUPS: { label: string; buttons: { id: string; label: string }[] }[] = [
  {
    label: '标题',
    buttons: [
      { id: 'h1', label: 'H1' },
      { id: 'h2', label: 'H2' },
      { id: 'h3', label: 'H3' },
      { id: 'h4', label: 'H4' },
      { id: 'h5', label: 'H5' },
      { id: 'h6', label: 'H6' }
    ]
  },
  {
    label: '格式',
    buttons: [
      { id: 'bold', label: 'B' },
      { id: 'italic', label: 'I' },
      { id: 'strike', label: 'S' },
      { id: 'code', label: '`' },
      { id: 'mark', label: '高亮' },
      { id: 'color', label: '颜色' }
    ]
  },
  {
    label: '元素',
    buttons: [
      { id: 'link', label: '链接' },
      { id: 'image', label: '图片' },
      { id: 'codeBlock', label: '代码块' },
      { id: 'table', label: '表格' },
      { id: 'hr', label: '分隔线' },
      { id: 'quote', label: '引用' }
    ]
  },
  {
    label: '列表',
    buttons: [
      { id: 'ul', label: '无序' },
      { id: 'ol', label: '有序' },
      { id: 'task', label: '任务' }
    ]
  },
  {
    label: '其他',
    buttons: [
      { 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">
        {GROUPS.map((group) => (
          <div key={group.label} className="md-format-group">
            <span className="md-format-group-label">{group.label}</span>
            <div className="md-format-group-btns">
              {group.buttons.map((b) => (
                <button
                  key={b.id}
                  type="button"
                  title={b.label}
                  onClick={() => void editorRef.current?.applyAction(b.id)}
                >
                  {b.label}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
