Toolbar

"use client";

import {
  AlignCenterIcon,
  AlignLeftIcon,
  AlignRightIcon,
  DollarSignIcon,
  PercentIcon,
} from "lucide-react";
import type { ReactElement } from "react";
import { Button } from "@/siteplane/components/button";
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from "@/siteplane/components/select";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/siteplane/components/toggle-group";
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/siteplane/components/toolbar";
import {
  Tooltip,
  TooltipPopup,
  TooltipProvider,
  TooltipTrigger,
} from "@/siteplane/components/tooltip";

const alignments = [
  { label: "Align left", value: "left", Icon: AlignLeftIcon },
  { label: "Align center", value: "center", Icon: AlignCenterIcon },
  { label: "Align right", value: "right", Icon: AlignRightIcon },
];

const fonts = [
  { label: "Helvetica", value: "helvetica" },
  { label: "Arial", value: "arial" },
  { label: "Times New Roman", value: "times-new-roman" },
];

function Hint({
  children,
  content,
}: {
  children: ReactElement;
  content: string;
}) {
  return (
    <Tooltip>
      <TooltipTrigger render={children} />
      <TooltipPopup sideOffset={8}>{content}</TooltipPopup>
    </Tooltip>
  );
}

export default function Example() {
  return (
    <TooltipProvider>
      <Toolbar aria-label="Formatting">
        <ToggleGroup
          aria-label="Text alignment"
          className="gap-1"
          defaultValue={["left"]}
        >
          {alignments.map(({ label, value, Icon }) => (
            <Hint content={label} key={value}>
              <ToolbarButton
                aria-label={label}
                render={<ToggleGroupItem value={value} />}
              >
                <Icon />
              </ToolbarButton>
            </Hint>
          ))}
        </ToggleGroup>
        <ToolbarSeparator />
        <ToolbarGroup aria-label="Number format">
          <Hint content="Format as currency">
            <ToolbarButton
              aria-label="Format as currency"
              render={<Button shape="square" variant="ghost" />}
            >
              <DollarSignIcon />
            </ToolbarButton>
          </Hint>
          <Hint content="Format as percent">
            <ToolbarButton
              aria-label="Format as percent"
              render={<Button shape="square" variant="ghost" />}
            >
              <PercentIcon />
            </ToolbarButton>
          </Hint>
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarGroup>
          <Select defaultValue="helvetica" items={fonts}>
            <Hint content="Select a different font">
              <ToolbarButton
                render={
                  <SelectTrigger aria-label="Font">
                    <SelectValue />
                  </SelectTrigger>
                }
              />
            </Hint>
            <SelectPopup>
              {fonts.map(({ label, value }) => (
                <SelectItem key={value} value={value}>
                  {label}
                </SelectItem>
              ))}
            </SelectPopup>
          </Select>
        </ToolbarGroup>
        <ToolbarSeparator />
        <ToolbarButton render={<Button />}>Save</ToolbarButton>
      </Toolbar>
    </TooltipProvider>
  );
}