"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { Button, CloseIcon, IconButton, Input, Modal, RadioGroup, RadioGroupItem } from "@byline/ui/react";
import { admonitionTypeOptions, getInitialState, validateFields } from "./fields.js";
import "./admonition-modal.css";
function intent(type) {
    switch(type){
        case 'note':
            return 'info';
        case 'tip':
            return 'success';
        case 'warning':
            return 'warning';
        case 'danger':
            return 'danger';
    }
}
function AdmonitionModal({ open = false, onSubmit, onClose, data: dataFromProps }) {
    const [synchronizedFormState, setSynchronizedFormState] = useState(void 0);
    const handleOnCancel = ()=>{
        if (null != onClose && 'function' == typeof onClose) onClose();
    };
    async function handleOnChange({ formState }) {
        return new Promise((resolve, _reject)=>{
            validateFields(formState);
            resolve(formState);
        });
    }
    const handleOnSubmit = ()=>{
        const { valid } = validateFields(synchronizedFormState);
        if (true === valid && null != synchronizedFormState) {
            if (null != onSubmit) {
                onSubmit({
                    admonitionType: synchronizedFormState.admonitionType.value,
                    title: synchronizedFormState.title.value
                });
                setSynchronizedFormState(void 0);
                if (null != onClose && 'function' == typeof onClose) onClose();
            }
        }
    };
    useEffect(()=>{
        if (null == synchronizedFormState && true === open) {
            const formState = getInitialState(dataFromProps);
            setSynchronizedFormState(formState);
        }
    }, [
        open,
        synchronizedFormState,
        dataFromProps
    ]);
    if (false === open) return null;
    return /*#__PURE__*/ jsx(Modal, {
        isOpen: open,
        onDismiss: handleOnCancel,
        closeOnOverlayClick: false,
        children: /*#__PURE__*/ jsxs(Modal.Container, {
            className: "admonition-modal-container",
            children: [
                /*#__PURE__*/ jsxs(Modal.Header, {
                    className: "admonition-modal-header",
                    children: [
                        /*#__PURE__*/ jsx("h3", {
                            children: "Admonition"
                        }),
                        /*#__PURE__*/ jsx(IconButton, {
                            "arial-label": "Close",
                            size: "xs",
                            onClick: handleOnCancel,
                            children: /*#__PURE__*/ jsx(CloseIcon, {
                                width: "15px",
                                height: "15px",
                                svgClassName: "white-icon"
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ jsxs(Modal.Content, {
                    className: "admonition-modal-content",
                    children: [
                        /*#__PURE__*/ jsx(Input, {
                            inputWrapperClassName: "admonition-modal-title",
                            id: "title",
                            name: "title",
                            placeholder: "Title",
                            label: "Title",
                            onChange: (e)=>{
                                if (null != synchronizedFormState) {
                                    const newState = {
                                        ...synchronizedFormState,
                                        title: {
                                            ...synchronizedFormState.title,
                                            value: e.target.value
                                        }
                                    };
                                    handleOnChange({
                                        formState: newState
                                    }).then((newFormState)=>{
                                        setSynchronizedFormState(newFormState);
                                    });
                                }
                            },
                            value: synchronizedFormState?.title.value ?? '',
                            "data-test-id": "admonition-modal-title-input"
                        }),
                        /*#__PURE__*/ jsx(RadioGroup, {
                            className: "admonition-modal-radio-group",
                            defaultValue: "note",
                            direction: "row",
                            id: "admonitionType",
                            name: "admonitionType",
                            "aria-label": "Admonition Type",
                            value: synchronizedFormState?.admonitionType.value ?? 'note',
                            onValueChange: (value)=>{
                                if (null != synchronizedFormState) {
                                    const newState = {
                                        ...synchronizedFormState,
                                        admonitionType: {
                                            ...synchronizedFormState.admonitionType,
                                            value: value
                                        }
                                    };
                                    handleOnChange({
                                        formState: newState
                                    }).then((newFormState)=>{
                                        setSynchronizedFormState(newFormState);
                                    });
                                }
                            },
                            "data-test-id": "admonition-modal-type-radio",
                            children: admonitionTypeOptions.map((value)=>/*#__PURE__*/ jsx(RadioGroupItem, {
                                    intent: intent(value.value),
                                    id: value.id,
                                    value: value.value,
                                    label: value.label
                                }, value.id))
                        })
                    ]
                }),
                /*#__PURE__*/ jsxs(Modal.Actions, {
                    className: "admonition-modal-actions",
                    children: [
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            intent: "noeffect",
                            onClick: handleOnCancel,
                            "data-test-id": "admonition-modal-submit-button",
                            "data-autofocus": true,
                            children: "Close"
                        }),
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            intent: "primary",
                            onClick: handleOnSubmit,
                            "data-test-id": "admonition-modal-submit-button",
                            children: "Submit"
                        })
                    ]
                })
            ]
        })
    });
}
export { AdmonitionModal };
