"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Button, CloseIcon, IconButton, Modal, Select } from "@byline/ui/react";
import "./insert-layout-modal.css";
const layouts = [
    {
        label: '2 columns (equal width)',
        value: '1fr 1fr'
    },
    {
        label: '2 columns (25% - 75%)',
        value: '1fr 3fr'
    },
    {
        label: '2 columns (75% - 25%)',
        value: '3fr 1fr'
    },
    {
        label: '3 columns (equal width)',
        value: '1fr 1fr 1fr'
    },
    {
        label: '3 columns (25% - 50% - 25%)',
        value: '1fr 2fr 1fr'
    },
    {
        label: '4 columns (equal width)',
        value: '1fr 1fr 1fr 1fr'
    }
];
function InsertLayoutModal({ open = false, onClose, onSubmit }) {
    const [layout, setLayout] = useState(layouts[0].value);
    const handleOnCancel = ()=>{
        if (null != onClose && 'function' == typeof onClose) onClose();
    };
    const handleOnSubmit = ()=>{
        if (null != onSubmit && 'function' == typeof onSubmit) onSubmit(layout);
    };
    return /*#__PURE__*/ jsx(Modal, {
        isOpen: open,
        onDismiss: handleOnCancel,
        closeOnOverlayClick: false,
        children: /*#__PURE__*/ jsxs(Modal.Container, {
            className: "insert-layout-modal-container",
            children: [
                /*#__PURE__*/ jsxs(Modal.Header, {
                    children: [
                        /*#__PURE__*/ jsx("h3", {
                            children: "Insert Layout"
                        }),
                        /*#__PURE__*/ jsx(IconButton, {
                            "arial-label": "Close",
                            size: "sm",
                            onClick: handleOnCancel,
                            children: /*#__PURE__*/ jsx(CloseIcon, {
                                width: "16px",
                                height: "16px",
                                svgClassName: "white-icon"
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ jsx(Modal.Content, {
                    children: /*#__PURE__*/ jsx(Select, {
                        containerClassName: "insert-layout-modal-select",
                        items: layouts,
                        onValueChange: (value)=>{
                            if (null != value) setLayout(value);
                        },
                        placeholder: "Select a layout"
                    })
                }),
                /*#__PURE__*/ jsxs(Modal.Actions, {
                    className: "insert-layout-modal-actions",
                    children: [
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            intent: "noeffect",
                            onClick: handleOnCancel,
                            "data-autofocus": true,
                            children: "Cancel"
                        }),
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            intent: "primary",
                            onClick: handleOnSubmit,
                            "data-test-id": "table-modal-submit",
                            children: "Insert"
                        })
                    ]
                })
            ]
        })
    });
}
export { InsertLayoutModal };
