// remirror
import { useCommands, useActive } from "@remirror/react";
// ui
import { CustomMenu } from "components/ui";

const HeadingControls = () => {
  const { toggleHeading, focus } = useCommands();

  const active = useActive();

  return (
    <div className="flex items-center gap-1">
      <CustomMenu
        width="lg"
        label={`${
          active.heading({ level: 1 })
            ? "Heading 1"
            : active.heading({ level: 2 })
            ? "Heading 2"
            : active.heading({ level: 3 })
            ? "Heading 3"
            : "Normal text"
        }`}
      >
        <CustomMenu.MenuItem
          onClick={() => {
            toggleHeading({ level: 1 });
            focus();
          }}
          className={`${active.heading({ level: 1 }) ? "bg-indigo-50" : ""}`}
        >
          Heading 1
        </CustomMenu.MenuItem>
        <CustomMenu.MenuItem
          onClick={() => {
            toggleHeading({ level: 2 });
            focus();
          }}
          className={`${active.heading({ level: 2 }) ? "bg-indigo-50" : ""}`}
        >
          Heading 2
        </CustomMenu.MenuItem>
        <CustomMenu.MenuItem
          onClick={() => {
            toggleHeading({ level: 3 });
            focus();
          }}
          className={`${active.heading({ level: 3 }) ? "bg-indigo-50" : ""}`}
        >
          Heading 3
        </CustomMenu.MenuItem>
      </CustomMenu>
    </div>
  );
};

export default HeadingControls;