import type { CSSProperties, ReactNode } from 'react'
import type { Editor } from '@tiptap/react'

export interface RichTextEditorToolbarState {
  editor: Editor | null
  isBold: boolean
  isItalic: boolean
  isH2: boolean
  isBullet: boolean
}

export interface DefaultToolbarProps extends RichTextEditorToolbarState {}

const btnStyle: CSSProperties = {
  border: '1px solid #ccc',
  background: 'transparent',
  borderRadius: 4,
  padding: '2px 8px',
  cursor: 'pointer',
}

function ToolbarButton({
  label,
  pressed,
  onClick,
  children,
}: {
  label: string
  pressed: boolean
  onClick: () => void
  children: ReactNode
}) {
  return (
    <button
      type="button"
      aria-label={label}
      aria-pressed={pressed}
      onClick={onClick}
      style={btnStyle}
    >
      {children}
    </button>
  )
}

/** Default Bold / Italic / H2 / Bullet-list toolbar. */
export function DefaultToolbar({
  editor,
  isBold,
  isItalic,
  isH2,
  isBullet,
}: DefaultToolbarProps) {
  return (
    <div role="toolbar" aria-label="Formatting" style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
      <ToolbarButton
        label="Bold"
        pressed={isBold}
        onClick={() => {
          if (editor?.can().toggleBold()) {
            editor.chain().focus().toggleBold().run()
          }
        }}
      >
        B
      </ToolbarButton>
      <ToolbarButton
        label="Italic"
        pressed={isItalic}
        onClick={() => {
          if (editor?.can().toggleItalic()) {
            editor.chain().focus().toggleItalic().run()
          }
        }}
      >
        I
      </ToolbarButton>
      <ToolbarButton
        label="Heading 2"
        pressed={isH2}
        onClick={() => {
          if (editor?.can().toggleHeading({ level: 2 })) {
            editor.chain().focus().toggleHeading({ level: 2 }).run()
          }
        }}
      >
        H2
      </ToolbarButton>
      <ToolbarButton
        label="Bullet list"
        pressed={isBullet}
        onClick={() => {
          if (editor?.can().toggleBulletList()) {
            editor.chain().focus().toggleBulletList().run()
          }
        }}
      >
        •
      </ToolbarButton>
    </div>
  )
}