import { Button } from "@/components/ui/button";
import { useEditor } from "novel";
import { RedoIcon, UndoIcon } from "lucide-react";
import { selectionItems } from "../selector/selection-items";

export const MenuBar = () => {
  const { editor } = useEditor();

  if (!editor) {
    return null;
  }

  return (
    <div className="sticky top-0 z-50 flex justify-between gap-1 bg-background py-4">
      <div className="flex flex-wrap gap-1">
        {selectionItems.map((item) => (
          <Button
            key={item.name}
            size={"icon"}
            variant={"outline"}
            onClick={() => item.command(editor)}
            disabled={item?.canRun ? item.canRun(editor) : false}
            className={item.isActive(editor) ? "border-foreground/75" : ""}
          >
            <item.icon />
          </Button>
        ))}
      </div>
      <div className="flex gap-1">
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().undo().run()}
          disabled={!editor.can().chain().focus().undo().run()}
        >
          <UndoIcon className="size-4" />
        </Button>
        <Button
          variant={"outline"}
          size={"icon"}
          onClick={() => editor.chain().focus().redo().run()}
          disabled={!editor.can().chain().focus().redo().run()}
        >
          <RedoIcon className="size-4" />
        </Button>
      </div>
    </div>
  );
};
