Toolbar

"use client";

import {
  Toolbar,
  ToolbarGroup,
  ToolbarButton,
  ToolbarSeparator,
  ToolbarToggleGroup,
  ToolbarToggleItem,
  Badge,
  Button
} from "@pimolu/react";
import { useState } from "react";

type Alignment = "left" | "center" | "right";

function AlignLeftIcon() {
  return (
    <svg
      viewBox="0 0 20 20"
      width="15"
      height="15"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      aria-hidden="true"
    >
      <path d="M3 5h14M3 9h8M3 13h14M3 17h6" />
    </svg>
  );
}

function AlignCenterIcon() {
  return (
    <svg
      viewBox="0 0 20 20"
      width="15"
      height="15"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      aria-hidden="true"
    >
      <path d="M3 5h14M6 9h8M3 13h14M7 17h6" />
    </svg>
  );
}

function AlignRightIcon() {
  return (
    <svg
      viewBox="0 0 20 20"
      width="15"
      height="15"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      aria-hidden="true"
    >
      <path d="M3 5h14M9 9h8M3 13h14M11 17h6" />
    </svg>
  );
}

function TextPreview({ formats, alignment, }: {
  formats: string[];
  alignment: Alignment;
}) {
  return (
    <div
      className="max-w-prose leading-relaxed"
      style={{
        minHeight: 96,
        padding: 16,
        border: "1px solid var(--pimolu-border)",
        borderRadius: "var(--pimolu-radius-md)",
        background: "var(--pimolu-surface)",
        fontWeight: formats.includes("bold") ? 700 : 400,
        fontStyle: formats.includes("italic")
          ? "italic"
          : "normal",
        textDecoration: formats.includes("underline")
          ? "underline"
          : "none",
        textAlign: alignment,
      }}
    >
      The release is ready. Toggle the controls above to apply
      formatting to this paragraph.
    </div>
  );
}

function EditorToolbar({
  formats,
  alignment,
  onFormatsChange,
  onAlignmentChange,
  onAction,
}: {
  formats: string[];
  alignment: Alignment;
  onFormatsChange: (value: string[]) => void;
  onAlignmentChange: (value: string) => void;
  onAction: (action: string) => void;
}) {
  return (
    <Toolbar aria-label="Editor toolbar">
      <ToolbarGroup aria-label="History">
        <ToolbarButton aria-label="Undo" title="Undo" onClick={() => onAction("Undo")}>
          <span aria-hidden="true">↶</span>
        </ToolbarButton>
        <ToolbarButton aria-label="Redo" title="Redo" onClick={() => onAction("Redo")}>
          <span aria-hidden="true">↷</span>
        </ToolbarButton>
      </ToolbarGroup>
      <ToolbarSeparator />
      <ToolbarToggleGroup
        type="multiple"
        aria-label="Text formatting"
        value={formats}
        onValueChange={onFormatsChange}
      >
        <ToolbarToggleItem value="bold" aria-label="Bold">
          <strong aria-hidden="true">B</strong>
        </ToolbarToggleItem>
        <ToolbarToggleItem value="italic" aria-label="Italic">
          <em aria-hidden="true">I</em>
        </ToolbarToggleItem>
        <ToolbarToggleItem value="underline" aria-label="Underline">
          <span aria-hidden="true" style={{ textDecoration: "underline" }}>U</span>
        </ToolbarToggleItem>
      </ToolbarToggleGroup>
      <ToolbarSeparator />
      <ToolbarToggleGroup
        type="single"
        aria-label="Alignment"
        value={alignment}
        onValueChange={onAlignmentChange}
      >
        <ToolbarToggleItem value="left" aria-label="Align left">
          <AlignLeftIcon />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="center" aria-label="Align center">
          <AlignCenterIcon />
        </ToolbarToggleItem>
        <ToolbarToggleItem value="right" aria-label="Align right">
          <AlignRightIcon />
        </ToolbarToggleItem>
      </ToolbarToggleGroup>
      <ToolbarSeparator />
      <ToolbarButton aria-label="Insert link" onClick={() => onAction("Insert link")}>Link</ToolbarButton>
      <ToolbarButton disabled>Share</ToolbarButton>
    </Toolbar>
  );
}

export function DemoExample() {
  const [formats, setFormats] = useState<string[]>([
    "bold",
  ]);
  const [alignment, setAlignment] = useState<Alignment>("left");
  const [lastAction, setLastAction] = useState("Nothing selected yet");
  return (
    <div className="grid gap-5 min-w-0">
      <div
        className="flex flex-wrap items-center gap-3 min-w-0 justify-between"
        style={{
          flexWrap: "wrap"
        }}
      >
        <EditorToolbar
          formats={formats}
          alignment={alignment}
          onFormatsChange={setFormats}
          onAlignmentChange={(value) => setAlignment(value as Alignment)}
          onAction={setLastAction}
        />
        <div className="flex flex-wrap items-center gap-3 min-w-0">
          <Badge variant="primary">
            {
              formats.length > 0
                ? formats.join(" + ")
                : "no formatting"
            }
          </Badge>
          <Badge variant="neutral">
            {alignment}
          </Badge>
        </div>
      </div>
      <TextPreview formats={formats} alignment={alignment} />
      <div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
        <span className="text-sm text-muted leading-relaxed">
          Last action: {lastAction}
        </span>
        <Button
          size="sm"
          appearance="ghost"
          onClick={() => {
            setFormats([]);
            setAlignment("left");
            setLastAction("Formatting cleared");
          }}
        >
          Reset formatting
        </Button>
      </div>
    </div>
  );
}