"use strict";
exports.id = 9471;
exports.ids = [9471];
exports.modules = {

/***/ 9471:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ Modal)
/* harmony export */ });
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7849);
/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom_client__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2423);
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lucide_react__WEBPACK_IMPORTED_MODULE_3__);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 



////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - React component props including { children }
 * @param {React.ReactNode} props.children - React children
 * @param {boolean} props.open
 * @param {React.Dispatch<React.SetStateAction<boolean>>} [props.setOpen]
 * @param {()=>void} [props.onClose]
 * @param {string} [props.maxWidth] - Ex "500px"
 */ function Modal({ children , open , setOpen , onClose , maxWidth  }) {
    /**
     * Get Contexts
     *
     * @description { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @description Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @description { useState, useEffect, useRef, etc ... }
     */ react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{
        if (open) {
            const modalWrapper = document.createElement("div");
            modalWrapper.className = "modal-wrapper";
            const domNode = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(modalWrapper);
            domNode.render(/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(ModalComponent, {
                onClose: onClose,
                maxWidth: maxWidth,
                children: children
            }));
            document.body.appendChild(modalWrapper);
        } else {
            document.querySelectorAll(".modal-wrapper").forEach((modalEl)=>{
                modalEl.parentElement?.removeChild(modalEl);
            });
        }
    }, [
        open
    ]);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @description Main Function Return
     */ ////////////////////////////////////////
    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {});
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * @param {Object} props - React component props including { children }
 * @param {React.ReactNode} props.children - React children
 * @param {()=>void} [props.onClose]
 * @param {string} [props.maxWidth]
 * @param {boolean} [props.open]
 */ function ModalComponent({ children , onClose , maxWidth , open  }) {
    /** @type {React.Ref<HTMLDivElement>} */ // @ts-ignore
    const modalRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
    // React.useEffect(() => {
    //     if (!open) {
    //         /** @type {HTMLDivElement} */ // @ts-ignore
    //         const modalEl = modalRef.current?.closest(".modal-wrapper");
    //         closeModal({ modalEl });
    //     }
    // }, [open]);
    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
        children: [
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                className: "modal-cancel",
                onClick: (e)=>{
                    /** @type {HTMLDivElement} */ // @ts-ignore
                    const modalEl = e.target.closest(".modal-wrapper");
                    closeModal({
                        modalEl,
                        closeFn: onClose
                    });
                }
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "modal-content",
                style: {
                    maxWidth: maxWidth || undefined
                },
                ref: modalRef,
                children: [
                    children,
                    " ",
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                        className: "ghost modal-cancel-button",
                        onClick: (e)=>{
                            /** @type {HTMLDivElement} */ // @ts-ignore
                            const modalEl = e.target.closest(".modal-wrapper");
                            closeModal({
                                modalEl,
                                closeFn: onClose
                            });
                        },
                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_3__.X, {})
                    })
                ]
            })
        ]
    });
}
/**
 * @param {object} param0
 * @param {HTMLElement} param0.modalEl
 * @param {()=>void} [param0.closeFn]
 */ function closeModal({ modalEl , closeFn  }) {
    if (closeFn) closeFn();
    modalEl.parentElement?.removeChild(modalEl);
}


/***/ })

};
;