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

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

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ AddDatabaseForm)
/* 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 _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5264);
/* harmony import */ var _pages_admin_user_id_databases_add_database__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6706);
/* harmony import */ var _functions_frontend_checkUniqueField__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4105);
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5472);
/* harmony import */ var _DatabaseForm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3121);
/* harmony import */ var _DatabaseImage__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1933);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 








/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 */ function AddDatabaseForm(props) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ const { user , dbImage , setDbImage , query  } = react__WEBPACK_IMPORTED_MODULE_1___default().useContext(_pages_admin_user_id_databases_add_database__WEBPACK_IMPORTED_MODULE_3__.AddDatabaseContext);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ if (!user) {
        return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {});
    }
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const [alert, setAlert] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
    const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);
    // React.useEffect(() => {
    //     if (!dbImage?.imageBase64Full) {
    //         const presetImage = document.createElement("img");
    //         presetImage.src = "/images/database-placeholder.png";
    //         imageNodeToBase64SpecificWidth({ imageNode: presetImage, maxWidth: 400, mimeType: "image/png" }).then((res) => {
    //             setDbImage({ ...res, imageName: "Preset-db-image" })
    //         })
    //     }
    // }, [])
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("section", {
        className: "card",
        children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
            className: "w-full grid grid-cols-1 xl:grid-cols-2 gap-6 items-stretch",
            children: [
                loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {}),
                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                    className: "flex-col items-start",
                    children: [
                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h2", {
                            className: "text-xl m-0 text-left w-full",
                            children: "New Database Information"
                        }),
                        user && dbImage && setDbImage && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_DatabaseForm__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z, {
                            user: user,
                            dbImage: dbImage,
                            setDbImage: setDbImage,
                            setLoading: setLoading,
                            query: query
                        })
                    ]
                }),
                user && dbImage && setDbImage && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_DatabaseImage__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .Z, {
                    user: user,
                    dbImage: dbImage,
                    setDbImage: setDbImage
                })
            ]
        })
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ }),

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


// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "Z": () => (/* binding */ DatabaseForm)
});

// EXTERNAL MODULE: external "react/jsx-runtime"
var jsx_runtime_ = __webpack_require__(997);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(6689);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
// EXTERNAL MODULE: ./functions/frontend/checkUniqueField.js
var checkUniqueField = __webpack_require__(4105);
// EXTERNAL MODULE: ./components/general/FormAlertBlock.jsx
var FormAlertBlock = __webpack_require__(7037);
// EXTERNAL MODULE: external "react-dom"
var external_react_dom_ = __webpack_require__(6405);
// EXTERNAL MODULE: ./functions/frontend/fetchApi.js
var fetchApi = __webpack_require__(6729);
// EXTERNAL MODULE: ./functions/frontend/updateDiskUsage.js
var updateDiskUsage = __webpack_require__(1069);
;// CONCATENATED MODULE: ./functions/frontend/submitUpdateDatabaseForm.js
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 


////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
let timeout;
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} params
 * @param {any} params.e
 * @param {React.Dispatch<React.SetStateAction<boolean>>} params.setLoading
 * @param {any} params.dbImage
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} params.database
 * @param {import("@/package-shared/types").UserType} params.user
 */ async function submitUpdateDatabaseForm({ e , setLoading , dbImage , database , user ,  }) {
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ setLoading(true);
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ /** @type {any} */ let formBody = {
        db_description: e.target["database_description"]?.value?.match(/./) ? e.target["database_description"].value : null,
        db_name: e.target["database_name"]?.value?.match(/./) ? e.target["database_name"].value : null,
        db_slug: e.target["database_slug"]?.value?.match(/./) ? e.target["database_slug"].value : null,
        db_full_name: database.db_full_name,
        id: database.id,
        active_clone: database.active_clone,
        active_clone_parent_db: database.active_clone_parent_db
    };
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ if (dbImage) {
        if (typeof dbImage === "string") {
            formBody.db_image = dbImage;
        } else if (typeof dbImage === "object") {
            const uploadImage = await (0,fetchApi/* default */.Z)("/api/addUserMedia", {
                method: "post",
                body: {
                    media: [
                        dbImage
                    ],
                    folder: formBody.db_slug.replace(/_/g, "-"),
                    type: "image"
                }
            }, true);
            formBody.db_image = uploadImage?.mediaData[0]?.media_thumbnail_url ? uploadImage.mediaData[0].media_thumbnail_url : "/images/database-placeholder.png";
        }
    } else {
        formBody.db_image = "/images/database-placeholder.png";
    }
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ (0,fetchApi/* default */.Z)("/api/updateUserDatabase", {
        method: "post",
        body: formBody
    }, true).then((res)=>{
        if (res.success) {
            (0,updateDiskUsage/* default */.Z)().then(()=>{
                window.location.pathname = `/admin/${user?.id}/databases`;
                setTimeout(()=>{
                    setLoading(false);
                }, 1000);
            });
        } else {
            alert("Error! Please Try Again");
            setTimeout(()=>{
                setLoading(false);
            }, 1000);
        }
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

;// CONCATENATED MODULE: ./functions/frontend/submitNewDatabaseForm.js
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 


////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
let submitNewDatabaseForm_timeout;
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} params
 * @param {any} params.e
 * @param {React.Dispatch<React.SetStateAction<boolean>>} params.setLoading
 * @param {any} params.dbImage
 * @param {boolean} params.keepUpdated
 * @param {boolean} params.keepDataUpdated
 * @param {any} params.query
 * @param {import("@/package-shared/types").UserType} params.user
 */ async function submitNewDatabaseForm({ e , setLoading , dbImage , keepUpdated , keepDataUpdated , query , user ,  }) {
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ setLoading(true);
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ /** @type {any} */ let formBody = {
        db_name: e.target["database_name"].value,
        db_slug: e.target["database_slug"].value,
        db_description: e.target["database_description"]?.value?.match(/./) ? e.target["database_description"].value : null
    };
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ if (dbImage) {
        if (typeof dbImage === "string") {
            formBody.db_image = dbImage;
        } else if (typeof dbImage === "object") {
            const uploadImage = await (0,fetchApi/* default */.Z)("/api/addUserMedia", {
                method: "post",
                body: {
                    media: [
                        dbImage
                    ],
                    folder: formBody.db_slug.replace(/_/g, "-"),
                    type: "image"
                }
            }, true);
            formBody.db_image = uploadImage?.mediaData[0]?.media_thumbnail_url ? uploadImage.mediaData[0].media_thumbnail_url : "/images/database-placeholder.png";
        }
    }
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ if (query?.duplicate) {
        formBody["duplicate"] = query.duplicate;
        formBody["keepUpdated"] = keepUpdated ? keepUpdated : false;
        formBody["keepDataUpdated"] = keepDataUpdated ? keepDataUpdated : false;
    }
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ (0,fetchApi/* default */.Z)("/api/createUserDatabase", {
        method: "post",
        body: formBody
    }, true).then((res)=>{
        if (res.success) {
            (0,updateDiskUsage/* default */.Z)().then(()=>{
                window.location.pathname = `/admin/${user?.id}/databases/${formBody.db_slug}`;
            });
        } else {
            setTimeout(()=>{
                setLoading(false);
            }, 1000);
        }
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

// EXTERNAL MODULE: ./components/form/FormCheckboxes.jsx
var FormCheckboxes = __webpack_require__(9486);
;// CONCATENATED MODULE: ./components/admin/databases/DatabaseForm.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 






/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** @type {any} */ let DatabaseForm_timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").UserType} props.user
 * @param {string | import("@/package-shared/types").ImageObjectType} props.dbImage
 * @param {React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>>} [props.setDbImage]
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} [props.database]
 * @param {React.Dispatch<React.SetStateAction<boolean>>} props.setLoading
 * @param {any} [props.query]
 */ function DatabaseForm({ user , dbImage , setDbImage , database , setLoading , query ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     * @param {string} value
     */ async function checkDuplicateSlug(value) {
        if (database?.db_slug === value) {
            return null;
        }
        const duplicate = await (0,checkUniqueField/* default */.Z)({
            tableName: "user_databases",
            columnName: "db_slug",
            value: value,
            userId: user.id
        });
        return duplicate;
    }
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ /** @type { any } */ const alertState = external_react_default().useState(null);
    /** @type { [alert: string | null, setAlert: React.Dispatch<React.SetStateAction<string | null>>] } */ const [alert, setAlert] = alertState;
    const [keepUpdated, setKeepUpdated] = external_react_default().useState(false);
    const [keepDataUpdated, setKeepDataUpdated] = external_react_default().useState(false);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("form", {
        className: "w-full max-w-none xl:max-w-lg flex flex-col items-start gap-4 relative",
        onSubmit: (e)=>{
            e.preventDefault();
            if (database) {
                submitUpdateDatabaseForm({
                    e,
                    setLoading,
                    dbImage,
                    database,
                    user
                });
            } else {
                submitNewDatabaseForm({
                    e,
                    setLoading,
                    dbImage,
                    keepUpdated,
                    keepDataUpdated,
                    query,
                    user
                });
            }
        },
        children: [
            alert && /*#__PURE__*/ jsx_runtime_.jsx(FormAlertBlock/* default */.Z, {
                message: alert
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("label", {
                        htmlFor: "database_name",
                        children: "Name"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("input", {
                        type: "text",
                        name: "database_name",
                        id: "database_name",
                        placeholder: "Database Name",
                        onInput: async (e)=>{
                            /** @type {HTMLInputElement} */ // @ts-ignore
                            const inputEl = e.target;
                            const form = inputEl.closest("form");
                            if (inputEl.value.match(/./)) {
                                inputEl.classList.remove("warning");
                                setAlert(null);
                            } else {
                                inputEl.classList.add("warning");
                            }
                            if (form) {
                                form["database_slug"].value = inputEl.value.toLowerCase().replace(/ /g, "_").replace(/[^a-zA-Z0-9-_]/g, "");
                                let slugValue = form["database_slug"].value;
                                window.clearTimeout(DatabaseForm_timeout);
                                DatabaseForm_timeout = setTimeout(()=>{
                                    checkDuplicateSlug(slugValue).then((res)=>{
                                        if (res?.result) {
                                            form["database_slug"].classList.add("warning");
                                            setAlert("Duplicate Database Name");
                                        } else {
                                            form["database_slug"].classList.remove("warning");
                                            setAlert(null);
                                        }
                                    });
                                }, 300);
                            }
                        },
                        defaultValue: database ? database.db_name : "",
                        required: true
                    })
                ]
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("label", {
                        htmlFor: "database_slug",
                        children: "Slug"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("input", {
                        type: "text",
                        name: "database_slug",
                        id: "database_slug",
                        placeholder: "Database Slug",
                        onInput: (e)=>{
                            /** @type {HTMLInputElement} */ // @ts-ignore
                            const inputEl = e.target;
                            if (inputEl.value.match(/./)) {
                                inputEl.classList.remove("warning");
                                setAlert(null);
                            } else {
                                inputEl.classList.add("warning");
                            }
                            let slugValue = inputEl.value;
                            window.clearTimeout(DatabaseForm_timeout);
                            DatabaseForm_timeout = setTimeout(()=>{
                                checkDuplicateSlug(slugValue).then((res)=>{
                                    if (res?.result) {
                                        inputEl.classList.add("warning");
                                        setAlert("Duplicate Database Name");
                                    } else {
                                        inputEl.classList.remove("warning");
                                        setAlert(null);
                                    }
                                });
                            }, 300);
                        },
                        defaultValue: database ? database.db_slug : "",
                        required: true
                    })
                ]
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("label", {
                        htmlFor: "database_description",
                        children: "Description (optional)"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("textarea", {
                        name: "database_description",
                        id: "database_description",
                        placeholder: "Short Description of database",
                        defaultValue: database ? database.db_description : ""
                    })
                ]
            }),
            query?.duplicate && /*#__PURE__*/ jsx_runtime_.jsx((external_react_default()).Fragment, {
                children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                    className: "card col items-start",
                    children: [
                        /*#__PURE__*/ jsx_runtime_.jsx(FormCheckboxes/* default */.Z, {
                            checkBoxValues: [
                                {
                                    payload: "Keep New Database Updated?",
                                    title: "Keep New Database Updated?",
                                    name: "clone_database",
                                    onChangeHandler: (e)=>{
                                        if (e.target.checked) {
                                            setKeepUpdated(true);
                                        } else {
                                            setKeepUpdated(false);
                                        }
                                    }
                                }, 
                            ]
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx("span", {
                            className: "text-sm italic text-slate-600 dark:text-slate-300",
                            children: "By checking this box the new Database stays up to date with changes to the structure of the parent Database"
                        })
                    ]
                })
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("button", {
                type: "submit",
                className: "w-full",
                children: [
                    database ? "Update" : "Create",
                    " Database"
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ }),

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

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ DatabaseImage)
/* 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 _functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6718);
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472);
/* harmony import */ var _general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5449);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 




/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").UserType} props.user
 * @param {string | null | import("@/package-shared/types").ImageObjectType} props.dbImage
 * @param {React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>>} props.setDbImage
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} [props.database]
 */ function DatabaseImage({ user , dbImage , setDbImage , database  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const imagePreviewRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
        className: "card no-hover col items-center justify-center",
        children: [
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h4", {
                className: "m-0",
                children: "Database Image"
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                className: "bg-white rounded-full overflow-hidden w-24 h-24",
                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", {
                    src: dbImage ? typeof dbImage === "string" ? dbImage : dbImage.imageBase64Full : "/images/database-placeholder.png",
                    alt: "Database Image",
                    width: 100,
                    className: "w-full h-full object-cover",
                    // @ts-ignore
                    ref: imagePreviewRef,
                    "data-imagepreview": "image"
                })
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "w-full flex-col",
                id: "edit-database-image-option-wrapper",
                children: [
                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_ui_ButtonGroup__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
                        column: true,
                        className: "w-full",
                        children: [
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                                className: "outlined w-full whitespace-normal",
                                onClick: (e)=>{
                                    (0,_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* .openPopup */ .Mw)("user-media-popup");
                                },
                                children: "Choose Image from uploads"
                            }),
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                                className: "outlined secondary w-full whitespace-normal",
                                onClick: (e)=>{
                                    /** @type {HTMLButtonElement} */ // @ts-ignore
                                    const buttonEl = e.target;
                                    buttonEl?.closest("#edit-database-image-option-wrapper")?.querySelector("input")?.click();
                                },
                                children: "Choose Image from Computer"
                            })
                        ]
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        type: "file",
                        accept: ".png,.jpg,.jpeg,.webp",
                        placeholder: "Choose Database Image",
                        className: "hidden",
                        onChange: async (e)=>{
                            /** @type {File} */ // @ts-ignore
                            const imageInputFile = e.target.files[0];
                            let imageData = await (0,_functions_frontend_imageInputFileToBase64__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z)({
                                imageInputFile: imageInputFile,
                                maxWidth: 400
                            });
                            setDbImage(imageData);
                        }
                    })
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ }),

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

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ UserMediaPopup)
/* 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 _functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6729);
/* harmony import */ var _general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5472);
/* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5264);
/* harmony import */ var _ExistingFieldEdit__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(9967);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 





/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>>} props.setDbImage
 */ function UserMediaPopup({ setDbImage  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(true);
    /** @type {any} */ const mediaState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
    /** @type { [ media: import("@/package-shared/types").MYSQL_MediaType[] | null, setMedia: React.Dispatch<React.SetStateAction<import("@/package-shared/types").MYSQL_MediaType | null>> ] } */ const [media, setMedia] = mediaState;
    react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{
        (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z)("/api/getUserMedia").then((res)=>{
            setLoading(false);
            setMedia(res.media);
        });
    }, []);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .ZP, {
        title: "user-media-popup",
        children: [
            loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
                width: "20px"
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h4", {
                className: "m-0 text-lg",
                children: "Your Uploaded Images"
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                className: "grid grid-cols-2",
                children: media && media[0] && media.filter((media)=>media.media_type == "image").map((mediaObject, index)=>{
                    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                        className: "w-full h-44 cursor-pointer hover:opacity-70",
                        onClick: (e)=>{
                            setDbImage(mediaObject.media_thumbnail_url || null);
                            (0,_general_GeneralPopup__WEBPACK_IMPORTED_MODULE_2__/* .closePopup */ .j4)();
                        },
                        children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("img", {
                            src: mediaObject.media_thumbnail_url,
                            alt: "User Media",
                            className: "w-full h-full object-contain"
                        })
                    }, index + 1);
                })
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ }),

/***/ 4227:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

// @ts-check

const fs = __webpack_require__(7147);
const serverError = __webpack_require__(7023);
const NO_DB_HANDLER = __webpack_require__(2020);
/**
 * Create database from Schema Function
 * ==============================================================================
 * @param {string} queryString - Query String
 * @returns {Promise<any>}
 */ module.exports = async function noDatabaseDbHandler(queryString) {
    "production"?.match(/dev/) && fs.appendFileSync("./.tmp/sqlQuery.sql", queryString + "\n" + Date() + "\n\n\n", "utf8");
    /**
     * Declare variables
     *
     * @description Declare "results" variable
     */ let results;
    /**
     * Fetch from db
     *
     * @description Fetch data from db if no cache
     */ try {
        /** ********************* Run Query */ results = await NO_DB_HANDLER(queryString);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    } catch (/** @type {any} */ error) {
        serverError({
            component: "noDatabaseDbHandler",
            message: error.message
        });
        console.log("ERROR in noDatabaseDbHandler =>", error.message);
    }
    /**
     * Return results
     *
     * @description Return results add to cache if "req" param is passed
     */ if (results) {
        return results;
    } else {
        return null;
    }
};


/***/ }),

/***/ 2020:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

// @ts-check

const mysql = __webpack_require__(2261);
const grabDbSSL = __webpack_require__(3260);
let NO_DB = mysql({
    config: {
        host: process.env.DSQL_DB_HOST,
        user: process.env.DSQL_DB_USERNAME,
        password: process.env.DSQL_DB_PASSWORD,
        charset: "utf8mb4",
        ssl: grabDbSSL()
    }
});
/**
 * DSQL user read-only DB handler
 * @param {object} params
 * @param {string} params.paradigm
 * @param {string} params.database
 * @param {string} params.queryString
 * @param {string[]} [params.queryValues]
 */ // @ts-ignore
function NO_DB_HANDLER(...args) {
    try {
        return new Promise((resolve, reject)=>{
            NO_DB.query(...args).then((results)=>{
                NO_DB.end();
                resolve(JSON.parse(JSON.stringify(results)));
            }).catch((err)=>{
                NO_DB.end();
                resolve({
                    error: err.message,
                    sql: err.sql
                });
            });
        });
    } catch (/** @type {any} */ error) {
        return {
            success: false,
            error: error.message
        };
    }
}
module.exports = NO_DB_HANDLER;


/***/ }),

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

// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);

// EXPORTS
__webpack_require__.d(__webpack_exports__, {
  "AddDatabaseContext": () => (/* binding */ AddDatabaseContext),
  "default": () => (/* binding */ AddDatabase),
  "getServerSideProps": () => (/* binding */ getServerSideProps)
});

// EXTERNAL MODULE: external "react/jsx-runtime"
var jsx_runtime_ = __webpack_require__(997);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(6689);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
// EXTERNAL MODULE: ./layouts/AdminLayout.jsx + 2 modules
var AdminLayout = __webpack_require__(4858);
// EXTERNAL MODULE: ./functions/backend/userAuth.js
var userAuth = __webpack_require__(370);
var userAuth_default = /*#__PURE__*/__webpack_require__.n(userAuth);
// EXTERNAL MODULE: ./package-shared/functions/backend/noDatabaseDbHandler.js
var noDatabaseDbHandler = __webpack_require__(4227);
var noDatabaseDbHandler_default = /*#__PURE__*/__webpack_require__.n(noDatabaseDbHandler);
// EXTERNAL MODULE: ./components/general/BackButton.jsx
var BackButton = __webpack_require__(1781);
// EXTERNAL MODULE: ./components/general/Breadcrumbs.jsx
var Breadcrumbs = __webpack_require__(424);
// EXTERNAL MODULE: ./components/admin/databases/AddDatabaseForm.jsx
var AddDatabaseForm = __webpack_require__(3726);
;// CONCATENATED MODULE: ./components/admin/databases/AddDatabaseContent.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 





/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 */ function AddDatabaseContent(props) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ const { query , duplicateDb , user  } = external_react_default().useContext(AddDatabaseContext);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ const title = (()=>{
        if (query?.duplicate) {
            return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("span", {
                children: [
                    "Duplicate",
                    " ",
                    /*#__PURE__*/ jsx_runtime_.jsx("a", {
                        href: `/admin/${user?.id}/databases/${duplicateDb?.db_slug}`,
                        target: "_blank",
                        children: duplicateDb?.db_name
                    }),
                    " ",
                    "Database"
                ]
            });
        }
        return "Add A New Database";
    })();
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, {
        children: [
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "flex-col items-start gap-0 w-full",
                children: [
                    /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                        className: "flex-wrap",
                        children: [
                            /*#__PURE__*/ jsx_runtime_.jsx(BackButton/* default */.Z, {}),
                            /*#__PURE__*/ jsx_runtime_.jsx("h1", {
                                className: "text-3xl m-0",
                                children: title
                            })
                        ]
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx(Breadcrumbs/* default */.Z, {
                        user: user
                    })
                ]
            }),
            /*#__PURE__*/ jsx_runtime_.jsx(AddDatabaseForm/* default */.Z, {})
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

// EXTERNAL MODULE: ./components/admin/databases/UserMediaPopup.jsx
var UserMediaPopup = __webpack_require__(9310);
// EXTERNAL MODULE: ./package-shared/utils/backend/global-db/DB_HANDLER.js
var DB_HANDLER = __webpack_require__(9395);
var DB_HANDLER_default = /*#__PURE__*/__webpack_require__.n(DB_HANDLER);
;// CONCATENATED MODULE: ./pages/admin/[user_id]/databases/add-database.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 

////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////






/** ****************************************************************************** */ /** @type {import("@/package-shared/types").AddDbContextType} */ let addDatabaseContextObject = {};
const AddDatabaseContext = /*#__PURE__*/ external_react_default().createContext(addDatabaseContextObject);
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").UserType} props.user
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type[]} props.databases
 * @param {any} props.query
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.duplicateDb
 */ function AddDatabase({ user , databases , query , duplicateDb  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ const pageTitle = "Add Database | Datasquirel";
    const pageDescription = "Add a database";
    let head = /*#__PURE__*/ (0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, {
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx("title", {
                children: pageTitle
            }),
            /*#__PURE__*/ jsx_runtime_.jsx("meta", {
                name: "description",
                content: pageDescription
            })
        ]
    });
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ /** @type {any} */ const dbImageState = external_react_default().useState("/images/database-placeholder.png");
    /** @type { [ dbImage:string | null | import("@/package-shared/types").ImageObjectType, setDbImage: React.Dispatch<React.SetStateAction<string | null | import("@/package-shared/types").ImageObjectType>> ] } */ const [dbImage, setDbImage] = dbImageState;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ jsx_runtime_.jsx(AdminLayout/* default */.Z, {
        head: head,
        user: user,
        children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)(AddDatabaseContext.Provider, {
            value: {
                user,
                databases,
                dbImage,
                setDbImage,
                query,
                duplicateDb
            },
            children: [
                /*#__PURE__*/ jsx_runtime_.jsx(AddDatabaseContent, {}),
                /*#__PURE__*/ jsx_runtime_.jsx(UserMediaPopup/* default */.Z, {
                    setDbImage: setDbImage
                })
            ]
        })
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Server Side Props or Static Props
 * ==============================================================================
 * @type {import("next").GetServerSideProps}
 */ async function getServerSideProps({ req , res , query  }) {
    /**
     * User Auth
     *
     * @description User Auth
     */ const user = await userAuth_default()(req, res);
    if (!user?.logged_in_status) {
        return {
            redirect: {
                destination: "/login",
                permanent: false
            }
        };
    }
    if (!user?.verification_status?.toString()?.match(/1/)) {
        return {
            redirect: {
                destination: "/admin",
                permanent: false
            }
        };
    }
    /**
     * Page/Site Data Data Fetching
     *
     * @description Fetch data on the server before returning
     */ const databases = await noDatabaseDbHandler_default()(`SELECT SCHEMA_NAME AS dbFullName FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME LIKE 'user_${user.id}%'`);
    let duplicateDb = {};
    if (query.duplicate) {
        const dbDuplicateDb = await DB_HANDLER_default()(`SELECT * FROM user_databases WHERE db_full_name='${query.duplicate}'`);
        if (dbDuplicateDb && dbDuplicateDb[0]) duplicateDb = dbDuplicateDb[0];
    }
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Server props return
     *
     * @description Return data fetched on the server side
     */ return {
        props: {
            user: user,
            databases: databases,
            query,
            duplicateDb
        }
    };
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
}


/***/ })

};
;