"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { Button, CloseIcon, IconButton, Input, Modal } from "@byline/ui/react";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { INSERT_TABLE_COMMAND } from "@lexical/table";
import "./table-modal.css";
function TableModal({ open, onClose }) {
    const [editor] = useLexicalComposerContext();
    const [activeEditor] = useState(editor);
    const [rows, setRows] = useState('5');
    const [columns, setColumns] = useState('5');
    const [isDisabled, setIsDisabled] = useState(true);
    useEffect(()=>{
        const row = Number(rows);
        const column = Number(columns);
        0 !== row && row > 0 && row <= 500 && 0 !== column && column > 0 && column <= 50 ? setIsDisabled(false) : setIsDisabled(true);
    }, [
        rows,
        columns
    ]);
    const handleOnSubmit = ()=>{
        activeEditor.dispatchCommand(INSERT_TABLE_COMMAND, {
            columns,
            rows
        });
        if (null != onClose && 'function' == typeof onClose) onClose();
    };
    const handleOnRowsChange = (event)=>{
        setRows(event.target.value);
    };
    const handleOnColumnsChange = (event)=>{
        setColumns(event.target.value);
    };
    const handleOnCancel = ()=>{
        if (null != onClose && 'function' == typeof onClose) onClose();
    };
    return /*#__PURE__*/ jsx(Modal, {
        isOpen: open,
        onDismiss: handleOnCancel,
        closeOnOverlayClick: false,
        children: /*#__PURE__*/ jsxs(Modal.Container, {
            className: "table-modal-container",
            children: [
                /*#__PURE__*/ jsxs(Modal.Header, {
                    className: "table-modal-header",
                    children: [
                        /*#__PURE__*/ jsx("h3", {
                            children: "Insert Table"
                        }),
                        /*#__PURE__*/ jsx(IconButton, {
                            "arial-label": "Close",
                            size: "sm",
                            onClick: handleOnCancel,
                            children: /*#__PURE__*/ jsx(CloseIcon, {
                                width: "16px",
                                height: "16px",
                                svgClassName: "white-icon"
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ jsxs(Modal.Content, {
                    children: [
                        /*#__PURE__*/ jsx(Input, {
                            id: "number-of-rows",
                            name: "number-of-rows",
                            type: "number",
                            placeholder: '# of rows (1-500)',
                            label: "Rows",
                            onChange: handleOnRowsChange,
                            value: rows,
                            "data-test-id": "table-modal-rows"
                        }),
                        /*#__PURE__*/ jsx(Input, {
                            id: "number-of-columns",
                            name: "number-of-columns",
                            type: "number",
                            placeholder: '# of columns (1-50)',
                            label: "Columns",
                            onChange: handleOnColumnsChange,
                            value: columns,
                            "data-test-id": "table-modal-columns"
                        })
                    ]
                }),
                /*#__PURE__*/ jsxs(Modal.Actions, {
                    className: "table-modal-actions",
                    children: [
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            intent: "noeffect",
                            onClick: handleOnCancel,
                            "data-autofocus": true,
                            children: "Close"
                        }),
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            intent: "primary",
                            onClick: handleOnSubmit,
                            disabled: isDisabled,
                            "data-test-id": "table-modal-submit",
                            children: "Submit"
                        })
                    ]
                })
            ]
        })
    });
}
export { TableModal };
