import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ToolButton } from "../components/tool-button";
import { useCallback, useMemo, useRef, useState } from "react";
import { ResponsivePresenter } from "../../components/responsive";
import { moveColumnLeft as moveColumnLeftAction, moveColumnRight as moveColumnRightAction, moveRowDown as moveRowDownAction, moveRowUp as moveRowUpAction } from "../../extensions/table/actions";
import { MoreTools } from "../components/more-tools";
import { menuButtonToTool, toolToMenuButton } from "./utils";
import { getToolDefinition } from "../tool-definitions";
import { CellProperties as CellPropertiesPopup } from "../popups/cell-properties";
import { ColorTool } from "./colors";
import { Counter } from "../components/counter";
import { useToolbarLocation } from "../stores/toolbar-store";
import { showPopup } from "../../components/popup-presenter";
import { useRefValue } from "../../hooks/use-ref-value";
export function TableSettings(props) {
    const { editor } = props;
    const isBottom = useToolbarLocation() === "bottom";
    if (!editor.isActive("table") || !isBottom)
        return null;
    return (_jsx(MoreTools, Object.assign({}, props, { autoCloseOnUnmount: true, popupId: "tableSettings", tools: [
            "insertColumnLeft",
            "insertColumnRight",
            "insertRowAbove",
            "insertRowBelow",
            "columnProperties",
            "rowProperties",
            "deleteRow",
            "deleteColumn",
            "deleteTable"
        ] })));
}
export function RowProperties(props) {
    const { editor } = props;
    const buttonRef = useRef(null);
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const items = useMemo(() => [
        insertRowAbove(editor),
        insertRowBelow(editor),
        moveRowUp(editor),
        moveRowDown(editor),
        deleteRow(editor)
    ], 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []);
    return (_jsxs(_Fragment, { children: [_jsx(ToolButton, Object.assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: () => setIsMenuOpen(true) })), _jsx(ResponsivePresenter, { title: "Row properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: () => setIsMenuOpen(false), position: {
                    target: buttonRef.current,
                    isTargetAbsolute: true,
                    location: "below",
                    yOffset: 5
                }, items: items })] }));
}
export function ColumnProperties(props) {
    const { editor } = props;
    const buttonRef = useRef(null);
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const items = useMemo(() => [
        insertColumnLeft(editor),
        insertColumnRight(editor),
        moveColumnLeft(editor),
        moveColumnRight(editor),
        deleteColumn(editor)
    ], 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []);
    return (_jsxs(_Fragment, { children: [_jsx(ToolButton, Object.assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: () => setIsMenuOpen(true) })), _jsx(ResponsivePresenter, { title: "Column properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: () => setIsMenuOpen(false), position: {
                    target: buttonRef.current,
                    isTargetAbsolute: true,
                    location: "below",
                    yOffset: 5
                }, items: items })] }));
}
export function TableProperties(props) {
    const { editor } = props;
    const buttonRef = useRef(null);
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const items = useMemo(() => [
        insertColumnLeft(editor),
        insertColumnRight(editor),
        moveColumnLeft(editor),
        moveColumnRight(editor),
        deleteColumn(editor),
        { type: "separator", key: "cellSeperator" },
        mergeCells(editor),
        splitCells(editor),
        cellProperties(editor),
        { type: "separator", key: "tableSeperator" },
        deleteTable(editor)
    ], 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    []);
    return (_jsxs(_Fragment, { children: [_jsx(ToolButton, Object.assign({}, props, { buttonRef: buttonRef, toggled: isMenuOpen, onClick: () => setIsMenuOpen(true) })), _jsx(ResponsivePresenter, { title: "Table properties", mobile: "sheet", desktop: "menu", isOpen: isMenuOpen, onClose: () => setIsMenuOpen(false), position: {
                    target: buttonRef.current,
                    isTargetAbsolute: true,
                    location: "below",
                    yOffset: -25
                }, items: items })] }));
}
export function CellProperties(props) {
    const { editor } = props;
    const isBottom = useToolbarLocation() === "bottom";
    if (!editor.isActive("table") || !isBottom)
        return null;
    return (_jsx(_Fragment, { children: _jsx(MoreTools, Object.assign({}, props, { popupId: "cellProperties", tools: [
                "mergeCells",
                "splitCells",
                "cellBackgroundColor",
                "cellTextColor",
                "cellBorderColor",
                "cellBorderWidth"
            ] })) }));
}
export function CellBackgroundColor(props) {
    const { editor } = props;
    return (_jsx(ColorTool, Object.assign({}, props, { cacheKey: "cellBackgroundColor", activeColor: editor.getAttributes("tableCell").backgroundColor, title: "Cell background color", onColorChange: (color) => editor.chain().setCellAttribute("backgroundColor", color).run() })));
}
export function CellTextColor(props) {
    const { editor } = props;
    return (_jsx(ColorTool, Object.assign({}, props, { cacheKey: "cellTextColor", activeColor: editor.getAttributes("tableCell").color, title: "Cell text color", onColorChange: (color) => editor.chain().focus().setCellAttribute("color", color).run() })));
}
export function CellBorderColor(props) {
    const { editor } = props;
    return (_jsx(ColorTool, Object.assign({}, props, { cacheKey: "cellBorderColor", activeColor: editor.getAttributes("tableCell").borderColor, title: "Cell border color", onColorChange: (color) => editor.chain().focus().setCellAttribute("borderColor", color).run() })));
}
export function CellBorderWidth(props) {
    const { editor } = props;
    const { borderWidth: _borderWidth } = editor.getAttributes("tableCell");
    const borderWidth = _borderWidth
        ? typeof _borderWidth === "string"
            ? parseInt(_borderWidth)
            : _borderWidth
        : 1;
    const borderWidthAsNumber = useRefValue(borderWidth);
    const decreaseBorderWidth = useCallback(() => {
        return Math.max(1, borderWidthAsNumber.current - 1);
    }, [borderWidthAsNumber]);
    const increaseBorderWidth = useCallback(() => {
        return Math.min(10, borderWidthAsNumber.current + 1);
    }, [borderWidthAsNumber]);
    return (_jsx(Counter, { title: "cell border width", onDecrease: () => editor.commands.setCellAttribute("borderWidth", decreaseBorderWidth()), onIncrease: () => editor.commands.setCellAttribute("borderWidth", increaseBorderWidth()), onReset: () => editor.commands.setCellAttribute("borderWidth", 1), value: borderWidth + "px" }));
}
const insertColumnLeft = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("insertColumnLeft"))), { onClick: () => editor.chain().focus().addColumnBefore().run() }));
const insertColumnRight = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("insertColumnRight"))), { onClick: () => editor.chain().focus().addColumnAfter().run() }));
const moveColumnLeft = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("moveColumnLeft"))), { onClick: () => moveColumnLeftAction(editor) }));
const moveColumnRight = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("moveColumnRight"))), { onClick: () => moveColumnRightAction(editor) }));
const deleteColumn = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("deleteColumn"))), { onClick: () => editor.chain().focus().deleteColumn().run() }));
const splitCells = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("splitCells"))), { onClick: () => editor.chain().focus().splitCell().run() }));
const mergeCells = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("mergeCells"))), { onClick: () => editor.chain().focus().mergeCells().run() }));
const insertRowAbove = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("insertRowAbove"))), { onClick: () => editor.chain().focus().addRowBefore().run() }));
const insertRowBelow = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("insertRowBelow"))), { onClick: () => editor.chain().focus().addRowAfter().run() }));
const moveRowUp = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("moveRowUp"))), { onClick: () => moveRowUpAction(editor) }));
const moveRowDown = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("moveRowDown"))), { onClick: () => moveRowDownAction(editor) }));
const deleteRow = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("deleteRow"))), { onClick: () => editor.chain().focus().deleteRow().run() }));
const deleteTable = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("deleteTable"))), { onClick: () => editor.chain().focus().deleteTable().run() }));
const cellProperties = (editor) => (Object.assign(Object.assign({}, toolToMenuButton(getToolDefinition("cellProperties"))), { onClick: () => {
        showPopup({
            popup: (hide) => _jsx(CellPropertiesPopup, { onClose: hide, editor: editor })
        });
    } }));
export const InsertColumnLeft = menuButtonToTool(insertColumnLeft);
export const InsertColumnRight = menuButtonToTool(insertColumnRight);
export const MoveColumnLeft = menuButtonToTool(moveColumnLeft);
export const MoveColumnRight = menuButtonToTool(moveColumnRight);
export const DeleteColumn = menuButtonToTool(deleteColumn);
export const SplitCells = menuButtonToTool(splitCells);
export const MergeCells = menuButtonToTool(mergeCells);
export const InsertRowAbove = menuButtonToTool(insertRowAbove);
export const InsertRowBelow = menuButtonToTool(insertRowBelow);
export const MoveRowUp = menuButtonToTool(moveRowUp);
export const MoveRowDown = menuButtonToTool(moveRowDown);
export const DeleteRow = menuButtonToTool(deleteRow);
export const DeleteTable = menuButtonToTool(deleteTable);
