"use client";

import { useCallback, useEffect, useState } from "react";
import {
  ActionIcon,
  Button,
  ColorPicker,
  ColorSwatch,
  Group,
  NumberInput,
  Popover,
  ScrollArea,
  Stack,
  TextInput,
  useMantineColorScheme,
  useMantineTheme,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { Link, RichTextEditor, useRichTextEditorContext } from "@mantine/tiptap";
import {
  IconCheck,
  IconCircleOff,
  IconColumnInsertLeft,
  IconColumnInsertRight,
  IconColumnRemove,
  IconDeviceFloppy,
  IconEdit,
  IconHighlight,
  IconIndentDecrease,
  IconIndentIncrease,
  IconLayoutGrid,
  IconLetterA,
  IconListCheck,
  IconPhoto,
  IconRowInsertBottom,
  IconRowInsertTop,
  IconRowRemove,
  IconTableOff,
  IconTablePlus,
  IconX,
} from "@tabler/icons-react";
import { Color } from "@tiptap/extension-color";
import Highlight from "@tiptap/extension-highlight";
import Image from "@tiptap/extension-image";
import Table from "@tiptap/extension-table";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import TableRow from "@tiptap/extension-table-row";
import TaskItem from "@tiptap/extension-task-item";
import TaskList from "@tiptap/extension-task-list";
import TextAlign from "@tiptap/extension-text-align";
import TextStyle from "@tiptap/extension-text-style";
import Underline from "@tiptap/extension-underline";
import type { Editor } from "@tiptap/react";
import { BubbleMenu, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import type { Node } from "prosemirror-model";

import { clientApi } from "@homarr/api/client";
import { useForm } from "@homarr/form";
import type { TranslationObject } from "@homarr/translation";
import { useI18n, useScopedI18n } from "@homarr/translation/client";
import type { TablerIcon } from "@homarr/ui";

import type { WidgetComponentProps } from "../definition";

const iconProps = {
  size: "1.25rem",
  stroke: 1.5,
};

const controlIconProps = {
  size: "1rem",
  stroke: 1.5,
};

export function Notebook({ options, isEditMode, boardId, itemId }: WidgetComponentProps<"notebook">) {
  const [content, setContent] = useState(options.content);
  const [toSaveContent, setToSaveContent] = useState(content);

  // TODO: Add check for user permissions
  const enabled = !isEditMode;
  const [isEditing, setIsEditing] = useState(false);

  const { primaryColor } = useMantineTheme();
  const { colorScheme } = useMantineColorScheme();

  const { mutateAsync } = clientApi.widget.notebook.updateContent.useMutation();

  const tControls = useScopedI18n("widget.notebook.controls");
  const t = useI18n();

  const editor = useEditor(
    {
      extensions: [
        Color,
        Highlight.configure({ multicolor: true }),
        Image.extend({
          addAttributes() {
            return {
              ...this.parent?.(),
              width: { default: null },
            };
          },
        }).configure({ inline: true }),
        Link.configure({
          openOnClick: true,
          validate(url) {
            return /^https?:\/\//.test(url);
          },
        }).extend({
          addAttributes() {
            return {
              ...this.parent?.(),
              target: { default: null },
            };
          },
        }),
        StarterKit,
        Table.configure({
          resizable: true,
          lastColumnResizable: false,
        }),
        TableCell.extend({
          addAttributes() {
            return {
              ...this.parent?.(),
              backgroundColor: {
                default: undefined,
                renderHTML: (attributes) => ({
                  style: attributes.backgroundColor ? `background-color: ${attributes.backgroundColor}` : undefined,
                }),
                parseHTML: (element) => element.style.backgroundColor || undefined,
              },
            };
          },
        }),
        TableHeader,
        TableRow,
        TaskItem.configure({
          nested: true,
          onReadOnlyChecked: (node, checked) => {
            if (options.allowReadOnlyCheck && enabled) {
              const event = new CustomEvent("onReadOnlyCheck", {
                detail: { node, checked },
              });
              dispatchEvent(event);
              return true;
            }
            return false;
          },
        }),
        TaskList.configure({ itemTypeName: "taskItem" }),
        TextAlign.configure({ types: ["heading", "paragraph"] }),
        TextStyle,
        Underline,
      ],
      content,
      onUpdate: ({ editor }) => {
        setContent(editor.getHTML());
      },
      onCreate: ({ editor }) => {
        editor.setEditable(false);
      },
    },
    [toSaveContent],
  );

  const handleOnReadOnlyCheck = (event: CustomEventInit<{ node: Node; checked: boolean }>) => {
    if (!options.allowReadOnlyCheck) return;
    if (!editor) return;

    editor.state.doc.descendants((subnode, pos) => {
      if (!event.detail) return;
      if (!subnode.eq(event.detail.node)) return;

      if (subnode.eq(event.detail.node)) {
        const { tr } = editor.state;
        tr.setNodeMarkup(pos, undefined, {
          ...event.detail.node.attrs,
          checked: event.detail.checked,
        });
        editor.view.dispatch(tr);
        setContent(editor.getHTML());
        handleContentUpdate(editor.getHTML());
      }
    });
  };

  addEventListener("onReadOnlyCheck", handleOnReadOnlyCheck);

  const handleEditToggleCallback = (previous: boolean) => {
    const current = !previous;
    if (!editor) return current;
    editor.setEditable(current);

    handleContentUpdate(content);

    return current;
  };

  const handleEditCancelCallback = () => {
    if (!editor) return false;
    editor.setEditable(false);

    setContent(toSaveContent);
    editor.commands.setContent(toSaveContent);

    return false;
  };

  const handleEditCancel = useCallback(() => {
    setIsEditing(handleEditCancelCallback);
  }, [setIsEditing, handleEditCancelCallback]);

  const handleContentUpdate = (contentUpdate: string) => {
    setToSaveContent(contentUpdate);
    // This is not available in preview mode
    if (boardId && itemId) {
      void mutateAsync({ boardId, itemId, content: contentUpdate });
    }
  };

  const handleEditToggle = useCallback(() => {
    setIsEditing(handleEditToggleCallback);
  }, [setIsEditing, handleEditToggleCallback]);

  return (
    <>
      <RichTextEditor
        p={0}
        mt={0}
        h="100%"
        editor={editor}
        styles={(theme) => ({
          root: {
            "& .ProseMirror": {
              padding: "0  !important",
            },
            backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : "white",
            border: "none",
            borderRadius: "0.5rem",
            display: "flex",
            flexDirection: "column",
          },
          toolbar: {
            backgroundColor: "transparent",
            padding: "0.5rem",
          },
          content: {
            backgroundColor: "transparent",
            padding: "0.5rem",
          },
        })}
      >
        <RichTextEditor.Toolbar
          style={{
            display: isEditing && options.showToolbar === true ? "flex" : "none",
          }}
        >
          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Bold title={tControls("bold")} />
            <RichTextEditor.Italic title={tControls("italic")} />
            <RichTextEditor.Strikethrough title={tControls("strikethrough")} />
            <RichTextEditor.Underline title={tControls("underline")} />
            <TextColorControl />
            <TextHighlightControl />
            <RichTextEditor.Code title={tControls("code")} />
            <RichTextEditor.ClearFormatting title={tControls("clear")} />
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
            <RichTextEditor.H1 title={tControls("heading", { level: 1 })} />
            <RichTextEditor.H2 title={tControls("heading", { level: 2 })} />
            <RichTextEditor.H3 title={tControls("heading", { level: 3 })} />
            <RichTextEditor.H4 title={tControls("heading", { level: 4 })} />
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
            <RichTextEditor.AlignLeft
              title={tControls("align", {
                position: t("widget.notebook.align.left"),
              })}
            />
            <RichTextEditor.AlignCenter
              title={tControls("align", {
                position: t("widget.notebook.align.center"),
              })}
            />
            <RichTextEditor.AlignRight
              title={tControls("align", {
                position: t("widget.notebook.align.right"),
              })}
            />
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Blockquote title={tControls("blockquote")} />
            <RichTextEditor.Hr title={tControls("horizontalLine")} />
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
            <RichTextEditor.BulletList title={tControls("bulletList")} />
            <RichTextEditor.OrderedList title={tControls("orderedList")} />
            <TaskListToggle />
            {(editor?.isActive("taskList") || editor?.isActive("bulletList") || editor?.isActive("orderedList")) && (
              <>
                <ListIndentIncrease />
                <ListIndentDecrease />
              </>
            )}
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Link title={tControls("link")} />
            <RichTextEditor.Unlink title={tControls("unlink")} />
            <EmbedImage />
          </RichTextEditor.ControlsGroup>

          <RichTextEditor.ControlsGroup>
            <TableToggle />
            {editor?.isActive("table") && (
              <>
                <ColorCellControl />
                <TableToggleMerge />
                <TableAddColumnBefore />
                <TableAddColumnAfter />
                <TableRemoveColumn />
                <TableAddRowBefore />
                <TableAddRowAfter />
                <TableRemoveRow />
              </>
            )}
          </RichTextEditor.ControlsGroup>
        </RichTextEditor.Toolbar>
        {editor && (
          <BubbleMenu editor={editor}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold title={tControls("bold")} />
              <RichTextEditor.Italic title={tControls("italic")} />
              <RichTextEditor.Link title={tControls("link")} />
            </RichTextEditor.ControlsGroup>
          </BubbleMenu>
        )}

        <ScrollArea mih="4rem" offsetScrollbars pl={12} pt={12}>
          <RichTextEditor.Content />
        </ScrollArea>
      </RichTextEditor>
      {enabled && (
        <>
          <ActionIcon
            title={isEditing ? t("common.action.save") : t("common.action.edit")}
            style={{
              zIndex: 1,
            }}
            top={7}
            right={7}
            pos="absolute"
            color={primaryColor}
            variant="light"
            size={30}
            radius={"md"}
            onClick={handleEditToggle}
          >
            {isEditing ? <IconDeviceFloppy {...iconProps} /> : <IconEdit {...iconProps} />}
          </ActionIcon>
          {isEditing && (
            <ActionIcon
              title={t("common.action.cancel")}
              style={{
                zIndex: 1,
              }}
              top={44}
              right={7}
              pos="absolute"
              color={primaryColor}
              variant="light"
              size={30}
              radius={"md"}
              onClick={handleEditCancel}
            >
              <IconX {...iconProps} />
            </ActionIcon>
          )}
        </>
      )}
    </>
  );
}

function TextHighlightControl() {
  const tControls = useScopedI18n("widget.notebook.controls");
  const { editor } = useRichTextEditorContext();
  const defaultColor = "transparent";

  const getCurrent = useCallback(() => {
    return editor?.getAttributes("highlight").color as string | undefined;
  }, [editor]);

  const update = useCallback(
    (value: string) => {
      if (value === defaultColor) {
        editor?.chain().focus().unsetHighlight().run();
        return;
      }
      editor?.chain().focus().setHighlight({ color: value }).run();
    },
    [editor, defaultColor],
  );

  return (
    <ColorControl
      defaultColor={defaultColor}
      getCurrent={getCurrent}
      update={update}
      icon={IconHighlight}
      ariaLabel={tControls("colorHighlight")}
    />
  );
}

function TextColorControl() {
  const tControls = useScopedI18n("widget.notebook.controls");
  const { editor } = useRichTextEditorContext();
  const { black, colors } = useMantineTheme();
  const { colorScheme } = useMantineColorScheme();
  const defaultColor = colorScheme === "dark" ? colors.dark[0] : black;

  const getCurrent = useCallback(() => {
    return editor?.getAttributes("textStyle").color as string | undefined;
  }, [editor]);

  const update = useCallback(
    (value: string) => {
      if (value === defaultColor) {
        editor?.chain().focus().unsetColor().run();
        return;
      }
      editor?.chain().focus().setColor(value).run();
    },
    [editor, defaultColor],
  );

  return (
    <ColorControl
      defaultColor={defaultColor}
      getCurrent={getCurrent}
      update={update}
      icon={IconLetterA}
      ariaLabel={tControls("colorText")}
    />
  );
}

function ColorCellControl() {
  const tControls = useScopedI18n("widget.notebook.controls");
  const { editor } = useRichTextEditorContext();

  const getCurrent = useCallback(() => {
    return editor?.getAttributes("tableCell").backgroundColor as string | undefined;
  }, [editor]);

  const update = useCallback(
    (value: string) => {
      editor?.chain().focus().setCellAttribute("backgroundColor", value).run();
    },
    [editor],
  );

  return (
    <ColorControl
      defaultColor="transparent"
      getCurrent={getCurrent}
      update={update}
      icon={IconLayoutGrid}
      ariaLabel={tControls("colorCell")}
    />
  );
}

interface ColorControlProps {
  defaultColor: string;
  getCurrent: () => string | undefined;
  update: (value: string) => void;
  icon: TablerIcon;
  ariaLabel: string;
}

const ColorControl = ({ defaultColor, getCurrent, update, icon: Icon, ariaLabel }: ColorControlProps) => {
  const { editor } = useRichTextEditorContext();
  const [color, setColor] = useState(defaultColor);
  const { colors, white } = useMantineTheme();
  const { colorScheme } = useMantineColorScheme();
  const [opened, { close, toggle }] = useDisclosure(false);
  const t = useI18n();

  const palette = [
    "#000000",
    colors.dark[9],
    colors.dark[6],
    colors.dark[3],
    colors.dark[0],
    "#FFFFFF",
    colors.red[9],
    colors.pink[7],
    colors.grape[8],
    colors.violet[9],
    colors.indigo[9],
    colors.blue[5],
    colors.green[6],
    "#09D630",
    colors.lime[5],
    colors.yellow[5],
    "#EB8415",
    colors.orange[9],
  ];

  const onSelection = useCallback(() => {
    setColor(getCurrent() ?? defaultColor);
  }, [getCurrent, defaultColor, setColor]);

  useEffect(() => {
    editor?.on("selectionUpdate", onSelection);

    return () => {
      editor?.off("selectionUpdate", onSelection);
    };
  });

  const handleApplyColor = useCallback(() => {
    update(color);
    close();
  }, [color, update, close]);

  const handleClearColor = useCallback(() => {
    update(defaultColor);
    setColor(defaultColor);
    close();
  }, [update, setColor, close, defaultColor]);

  return (
    <Popover
      opened={opened}
      onChange={toggle}
      styles={{
        dropdown: {
          backgroundColor: colorScheme === "dark" ? colors.dark[7] : white,
        },
      }}
    >
      <Popover.Target>
        <RichTextEditor.Control onClick={toggle} title={ariaLabel}>
          <Group gap={3} px="0.2rem">
            <Icon {...controlIconProps} />
            <ColorSwatch size={14} color={color} />
          </Group>
        </RichTextEditor.Control>
      </Popover.Target>
      <Popover.Dropdown>
        <Stack gap={8}>
          <ColorPicker value={color} onChange={setColor} format="hexa" swatches={palette} swatchesPerRow={6} />
          <Group justify="right" gap={8}>
            <ActionIcon title={t("common.action.cancel")} variant="default" onClick={close}>
              <IconX stroke={1.5} size="1rem" />
            </ActionIcon>
            <ActionIcon title={t("common.action.apply")} variant="default" onClick={handleApplyColor}>
              <IconCheck stroke={1.5} size="1rem" />
            </ActionIcon>
            <ActionIcon title={t("widget.notebook.popover.clearColor")} variant="default" onClick={handleClearColor}>
              <IconCircleOff stroke={1.5} size="1rem" />
            </ActionIcon>
          </Group>
        </Stack>
      </Popover.Dropdown>
    </Popover>
  );
};

function EmbedImage() {
  const tControls = useScopedI18n("widget.notebook.controls");
  const t = useI18n();
  const { editor } = useRichTextEditorContext();
  const { colors, white } = useMantineTheme();
  const { colorScheme } = useMantineColorScheme();
  const [opened, { open, close, toggle }] = useDisclosure(false);
  const form = useForm({
    initialValues: {
      src: (editor?.getAttributes("image").src as string | undefined) ?? "",
      width: (editor?.getAttributes("image").width as string | undefined) ?? "",
    },
  });

  const handleOpen = useCallback(() => {
    form.reset();
    open();
  }, [form, open]);

  const handleSubmit = useCallback(
    (values: { src: string; width: string }) => {
      editor?.commands.insertContent({
        type: "paragraph",
        content: [
          {
            type: "image",
            attrs: values,
          },
        ],
      });
      close();
    },
    [editor, close],
  );

  return (
    <Popover
      opened={opened}
      onClose={close}
      onOpen={handleOpen}
      position="left"
      styles={{
        dropdown: {
          backgroundColor: colorScheme === "dark" ? colors.dark[7] : white,
        },
      }}
      trapFocus
    >
      <Popover.Target>
        <RichTextEditor.Control onClick={toggle} title={tControls("image")} active={editor?.isActive("image")}>
          <IconPhoto stroke={1.5} size="1rem" />
        </RichTextEditor.Control>
      </Popover.Target>
      <Popover.Dropdown>
        <form onSubmit={form.onSubmit(handleSubmit)}>
          <Stack gap={5}>
            <TextInput
              label={t("widget.notebook.popover.source")}
              placeholder="https://example.com/"
              {...form.getInputProps("src")}
            />
            <TextInput
              label={t("widget.notebook.popover.width")}
              placeholder={t("widget.notebook.popover.widthPlaceholder")}
              {...form.getInputProps("width")}
            />
            <Button type="submit" variant="default" mt={10} mb={5}>
              {t("common.action.save")}
            </Button>
          </Stack>
        </form>
      </Popover.Dropdown>
    </Popover>
  );
}

function TaskListToggle() {
  const { editor } = useRichTextEditorContext();
  const tControls = useScopedI18n("widget.notebook.controls");
  const handleToggleTaskList = useCallback(() => {
    editor?.chain().focus().toggleTaskList().run();
  }, [editor]);

  return (
    <RichTextEditor.Control
      title={tControls("checkList")}
      onClick={handleToggleTaskList}
      active={editor?.isActive("taskList")}
    >
      <IconListCheck stroke={1.5} size="1rem" />
    </RichTextEditor.Control>
  );
}

function ListIndentIncrease() {
  const { editor } = useRichTextEditorContext();
  const [itemType, setItemType] = useState("listItem");
  const tControls = useScopedI18n("widget.notebook.controls");
  const handleIncreaseIndent = useCallback(() => {
    editor?.chain().focus().sinkListItem(itemType).run();
  }, [editor, itemType]);

  editor?.on("selectionUpdate", ({ editor }) => {
    setItemType(editor?.isActive("taskItem") ? "taskItem" : "listItem");
  });

  return (
    <RichTextEditor.Control
      title={tControls("increaseIndent")}
      onClick={handleIncreaseIndent}
      interactive={editor?.can().sinkListItem(itemType)}
    >
      <IconIndentIncrease stroke={1.5} size="1rem" />
    </RichTextEditor.Control>
  );
}

function ListIndentDecrease() {
  const { editor } = useRichTextEditorContext();
  const [itemType, setItemType] = useState("listItem");
  const tControls = useScopedI18n("widget.notebook.controls");

  const handleDecreaseIndent = useCallback(() => {
    editor?.chain().focus().liftListItem(itemType).run();
  }, [editor, itemType]);

  editor?.on("selectionUpdate", ({ editor }) => {
    setItemType(editor?.isActive("taskItem") ? "taskItem" : "listItem");
  });

  return (
    <RichTextEditor.Control
      title={tControls("decreaseIndent")}
      onClick={handleDecreaseIndent}
      interactive={editor?.can().liftListItem(itemType)}
    >
      <IconIndentDecrease stroke={1.5} size="1rem" />
    </RichTextEditor.Control>
  );
}

const handleAddColumnBefore = (editor: Editor) => {
  editor.commands.addColumnBefore();
};

const TableAddColumnBefore = () => (
  <TableControl title="addColumnLeft" onClick={handleAddColumnBefore} icon={IconColumnInsertLeft} />
);

const handleAddColumnAfter = (editor: Editor) => {
  editor.commands.addColumnAfter();
};

const TableAddColumnAfter = () => (
  <TableControl title="addColumnRight" onClick={handleAddColumnAfter} icon={IconColumnInsertRight} />
);

const handleRemoveColumn = (editor: Editor) => {
  editor.commands.deleteColumn();
};

const TableRemoveColumn = () => (
  <TableControl title="deleteColumn" onClick={handleRemoveColumn} icon={IconColumnRemove} />
);

const handleAddRowBefore = (editor: Editor) => {
  editor.commands.addRowBefore();
};

const TableAddRowBefore = () => <TableControl title="addRowTop" onClick={handleAddRowBefore} icon={IconRowInsertTop} />;

const handleAddRowAfter = (editor: Editor) => {
  editor.commands.addRowAfter();
};

const TableAddRowAfter = () => (
  <TableControl title="addRowBelow" onClick={handleAddRowAfter} icon={IconRowInsertBottom} />
);

const handleRemoveRow = (editor: Editor) => {
  editor.commands.deleteRow();
};

const TableRemoveRow = () => <TableControl title="deleteRow" onClick={handleRemoveRow} icon={IconRowRemove} />;

interface TableControlProps {
  title: Exclude<keyof TranslationObject["widget"]["notebook"]["controls"], "align" | "heading">;
  onClick: (editor: Editor) => void;
  icon: TablerIcon;
}

const TableControl = ({ title, onClick, icon: Icon }: TableControlProps) => {
  const { editor } = useRichTextEditorContext();
  const tControls = useScopedI18n("widget.notebook.controls");
  const handleControlClick = useCallback(() => {
    if (!editor) return;
    onClick(editor);
  }, [editor, onClick]);

  return (
    <RichTextEditor.Control title={tControls(title)} onClick={handleControlClick}>
      <Icon {...controlIconProps} />
    </RichTextEditor.Control>
  );
};

function TableToggleMerge() {
  const { editor } = useRichTextEditorContext();
  const tControls = useScopedI18n("widget.notebook.controls");
  const handleToggleMerge = useCallback(() => {
    editor?.commands.mergeOrSplit();
  }, [editor]);

  return (
    <RichTextEditor.Control
      title={tControls("mergeCell")}
      onClick={handleToggleMerge}
      active={editor?.getAttributes("tableCell").colspan > 1}
    >
      <svg
        height="1.25rem"
        width="1.25rem"
        strokeWidth="0.1"
        stroke="currentColor"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        {/* No existing icon from tabler, taken from https://icon-sets.iconify.design/fluent/table-cells-merge-24-regular/ */}
        <path
          fill="currentColor"
          d="M15.58 11.25H8.42l.89-1.002a.75.75 0 0 0-1.12-.996l-2 2.25a.75.75 0 0 0 0 .996l2 2.25a.75.75 0 1 0 1.12-.996l-.89-1.002h7.16l-.89 1.002a.75.75 0 0 0 1.12.996l2-2.25l.011-.012a.746.746 0 0 0-.013-.987l-1.997-2.247a.75.75 0 0 0-1.121.996l.89 1.002ZM6.25 3A3.25 3.25 0 0 0 3 6.25v11.5A3.25 3.25 0 0 0 6.25 21h11.5A3.25 3.25 0 0 0 21 17.75V6.25A3.25 3.25 0 0 0 17.75 3H6.25ZM4.5 6.25c0-.966.784-1.75 1.75-1.75h11.5c.966 0 1.75.784 1.75 1.75v.25h-15v-.25ZM4.5 8h15v8h-15V8Zm15 9.5v.25a1.75 1.75 0 0 1-1.75 1.75H6.25a1.75 1.75 0 0 1-1.75-1.75v-.25h15Z"
        />
      </svg>
    </RichTextEditor.Control>
  );
}

function TableToggle() {
  const { editor } = useRichTextEditorContext();
  const isActive = editor?.isActive("table");

  const { colors, white } = useMantineTheme();
  const { colorScheme } = useMantineColorScheme();

  const [opened, { open, close, toggle }] = useDisclosure(false);
  const t = useI18n();
  const tControls = useScopedI18n("widget.notebook.controls");
  const form = useForm({
    initialValues: {
      cols: 3,
      rows: 3,
    },
  });

  const handleOpen = useCallback(() => {
    form.reset();
    open();
  }, [form, open]);

  const handleSubmit = useCallback(
    (values: { rows: number; cols: number }) => {
      editor?.commands.insertTable({ ...values, withHeaderRow: false });
      close();
    },
    [editor, close],
  );

  const handleControlClick = useCallback(() => {
    if (isActive) {
      editor?.commands.deleteTable();
    } else {
      toggle();
    }
  }, [isActive, editor, toggle]);

  return (
    <Popover
      opened={opened}
      onOpen={handleOpen}
      onClose={close}
      styles={{
        dropdown: {
          backgroundColor: colorScheme === "dark" ? colors.dark[7] : white,
        },
      }}
      trapFocus
    >
      <Popover.Target>
        <RichTextEditor.Control
          title={tControls(isActive ? "deleteTable" : "addTable")}
          active={isActive}
          onClick={handleControlClick}
        >
          {isActive ? <IconTableOff stroke={1.5} size="1rem" /> : <IconTablePlus stroke={1.5} size="1rem" />}
        </RichTextEditor.Control>
      </Popover.Target>
      <Popover.Dropdown>
        <form onSubmit={form.onSubmit(handleSubmit)}>
          <Stack gap={5}>
            <NumberInput label={t("widget.notebook.popover.columns")} min={1} {...form.getInputProps("cols")} />
            <NumberInput label={t("widget.notebook.popover.rows")} min={1} {...form.getInputProps("rows")} />
            <Button type="submit" variant="default" mt={10} mb={5}>
              {t("common.action.insert")}
            </Button>
          </Stack>
        </form>
      </Popover.Dropdown>
    </Popover>
  );
}