import { Editor, useEditorState } from "@tiptap/react";
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Heading1,
  Heading2,
  Heading3,
  Highlighter,
  Italic,
  List,
  ListOrdered,
} from "lucide-react";
import { Toggle } from "../ui/toggle";

interface MenubarProps {
  editor: Editor | null;
}

// 1. The main exported component remains safe and handles the null state cleanly
export default function Menubar({ editor }: MenubarProps) {
  if (!editor) {
    return null;
  }

  // Only render the inner menu once the editor is explicitly available
  return <MenubarInner editor={editor} />;
}

// 2. The inner component runs safely because 'editor' is guaranteed to be an Editor instance
function MenubarInner({ editor }: { editor: Editor }) {
  const editorState = useEditorState({
    editor, // Now safely guaranteed never to be null or undefined
    selector: (ctx) => {
      return {
        isBold: ctx.editor.isActive("bold"),
        isItalic: ctx.editor.isActive("italic"),
        isStrike: ctx.editor.isActive("strike"),
        isHighlight: ctx.editor.isActive("highlight"),

        isAlignLeft: ctx.editor.isActive({ textAlign: "left" }),
        isAlignCenter: ctx.editor.isActive({ textAlign: "center" }),
        isAlignRight: ctx.editor.isActive({ textAlign: "right" }),
        isAlignJustify: ctx.editor.isActive({ textAlign: "justify" }),

        isParagraph: ctx.editor.isActive("paragraph"),
        isHeading1: ctx.editor.isActive("heading", { level: 1 }),
        isHeading2: ctx.editor.isActive("heading", { level: 2 }),
        isHeading3: ctx.editor.isActive("heading", { level: 3 }),
      };
    },
  });

  const options = [
    {
      icon: <Heading1 className="size-4" />,
      onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
      pressed: editorState.isHeading1,
    },
    {
      icon: <Heading2 className="size-4" />,
      onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
      pressed: editorState.isHeading2,
    },
    {
      icon: <Heading3 className="size-4" />,
      onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
      pressed: editorState.isHeading3,
    },
    {
      icon: <Bold className="size-4" />,
      onClick: () => editor.chain().focus().toggleBold().run(),
      pressed: editorState.isBold,
    },
    {
      icon: <Italic className="size-4" />,
      onClick: () => editor.chain().focus().toggleItalic().run(),
      pressed: editorState.isItalic,
    },
    {
      icon: <AlignLeft className="size-4" />,
      onClick: () => editor.chain().focus().toggleTextAlign("left").run(),
      pressed: editorState.isAlignLeft,
    },
    {
      icon: <AlignCenter className="size-4" />,
      onClick: () => editor.chain().focus().toggleTextAlign("center").run(),
      pressed: editorState.isAlignCenter,
    },
    {
      icon: <AlignRight className="size-4" />,
      onClick: () => editor.chain().focus().toggleTextAlign("right").run(),
      pressed: editorState.isAlignRight,
    },
    {
      icon: <List className="size-4" />,
      onClick: () => editor.chain().focus().toggleBulletList().run(),
      pressed: editor.isActive("bulletList"),
    },
    {
      icon: <ListOrdered className="size-4" />,
      onClick: () => editor.chain().focus().toggleOrderedList().run(),
      pressed: editor.isActive("orderedList"),
    },
    {
      icon: <Highlighter className="size-4" />,
      onClick: () => editor.chain().focus().toggleHighlight().run(),
      pressed: editorState.isHighlight,
    },
  ];

  return (
    <div className="border rounded-md p-1 mb-1 bg-slate-50 space-x-2 z-50 flex items-center">
      {options.map((option, index) => (
        <Toggle key={index} pressed={option.pressed} onClick={option.onClick}>
          {option.icon}
        </Toggle>
      ))}
    </div>
  );
}