export type ToolbarExec = (cmd: string, val?: string) => void;

const BoldIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M4 2h3.75a2.5 2.5 0 0 1 0 5H4V2Zm0 5h4.25a2.5 2.5 0 0 1 0 5H4V7Z" />
  </svg>
);

const ItalicIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M6 2h5M3 12h5M8.5 2l-3 10" />
  </svg>
);

const UnderlineIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M3.5 2v4.25a3.5 3.5 0 0 0 7 0V2M2.5 12h9" />
  </svg>
);

const StrikeIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M10.5 3.25C9.75 2.4 8.65 2 7.2 2 5.35 2 4 2.8 4 4.2c0 1.2.95 1.75 2.55 2.15M3.5 10.5c.85 1 2.1 1.5 3.75 1.5 1.9 0 3.25-.8 3.25-2.2 0-1.15-.9-1.75-2.45-2.15M2 7h10" />
  </svg>
);

const HeadingIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M2 2.5v9M8 2.5v9M2 7h6M10 9.25c.25-.6.7-.9 1.35-.9.8 0 1.3.45 1.3 1.1 0 .55-.35.95-1.2 1.55L10.2 12h2.65" />
  </svg>
);

const QuoteIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M2.25 4.25h3v3h-2c0 1.4.55 2.45 1.65 3.15M8.25 4.25h3v3h-2c0 1.4.55 2.45 1.65 3.15" />
  </svg>
);

const BulletIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M5 3h7M5 7h7M5 11h7" />
    <circle cx="2" cy="3" r=".75" />
    <circle cx="2" cy="7" r=".75" />
    <circle cx="2" cy="11" r=".75" />
  </svg>
);

const NumberedIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M5 3h7M5 7h7M5 11h7M1.25 2.25h.8V4M1.2 6.15c.2-.35.5-.55.95-.55.55 0 .9.3.9.75 0 .4-.25.65-.8 1.05l-1 .7h1.9M1.2 10.15c.25-.3.55-.45.95-.45.55 0 .9.25.9.65 0 .35-.25.6-.7.65.5.05.8.3.8.7 0 .45-.4.75-1 .75-.45 0-.8-.15-1.05-.45" />
  </svg>
);

const RuleIcon = () => (
  <svg viewBox="0 0 14 14" aria-hidden="true">
    <path d="M1.5 7h11" />
  </svg>
);

function applyBold(exec: ToolbarExec) { exec("bold"); }
function applyItalic(exec: ToolbarExec) { exec("italic"); }
function applyUnderline(exec: ToolbarExec) { exec("underline"); }
function applyStrike(exec: ToolbarExec) { exec("strikeThrough"); }
function applyHeading(exec: ToolbarExec) {
  const val = document.queryCommandValue("formatBlock").toLowerCase();
  exec("formatBlock", val === "h2" ? "p" : "h2");
}
function applyQuote(exec: ToolbarExec) {
  const val = document.queryCommandValue("formatBlock").toLowerCase();
  exec("formatBlock", val === "blockquote" ? "p" : "blockquote");
}
function applyBullet(exec: ToolbarExec) { exec("insertUnorderedList"); }
function applyNumbered(exec: ToolbarExec) { exec("insertOrderedList"); }
function applyRule(exec: ToolbarExec) { exec("insertHorizontalRule"); }

interface ToolbarProps {
  exec: ToolbarExec;
  class?: string;
}

export function NoteToolbar(props: ToolbarProps) {
  return (
    <div class={props.class ?? "peach-note-toolbar-desktop-inline"}>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyBold(props.exec); }} title="Bold" aria-label="Bold"><BoldIcon /></button>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyItalic(props.exec); }} title="Italic" aria-label="Italic"><ItalicIcon /></button>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyUnderline(props.exec); }} title="Underline" aria-label="Underline"><UnderlineIcon /></button>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyStrike(props.exec); }} title="Strikethrough" aria-label="Strikethrough"><StrikeIcon /></button>
      <div class="peach-note-toolbar-divider" />
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyHeading(props.exec); }} title="Heading" aria-label="Heading"><HeadingIcon /></button>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyQuote(props.exec); }} title="Quote" aria-label="Quote"><QuoteIcon /></button>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyBullet(props.exec); }} title="Bullet list" aria-label="Bullet list"><BulletIcon /></button>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyNumbered(props.exec); }} title="Numbered list" aria-label="Numbered list"><NumberedIcon /></button>
      <button class="peach-note-toolbar-btn" onMouseDown={(e) => { e.preventDefault(); applyRule(props.exec); }} title="Divider" aria-label="Divider"><RuleIcon /></button>
    </div>
  );
}