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

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

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ DbCreateDbUserForm)
/* 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_6__ = __webpack_require__(6729);
/* harmony import */ var _general_FormAlertBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7037);
/* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5264);
/* harmony import */ var _form_FormInput__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7901);
/* harmony import */ var _UserImage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2733);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 

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





////////////////////////////////////////
/** @type {any} */ let timeout;
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {string} props.targetDb
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} [props.database]
 * @param {import("@/package-shared/types").UserType} [props.user]
 * @param {any} props.userImage
 * @param {React.Dispatch<React.SetStateAction<any>>} props.setUserImage
 */ function DbCreateDbUserForm({ targetDb , database , user , userImage , setUserImage ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ /** @type {[ alert: string | null, setAlert: React.Dispatch<React.SetStateAction<string | null>> ]} */ // @ts-ignore
    const [alert, setAlert] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
    const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
        children: [
            loading && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_LoadingBlock__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {}),
            alert && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_general_FormAlertBlock__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
                message: alert
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h3", {
                className: "m-0 text-lg font-semibold mb-1 text-slate-600 mt-4",
                children: "User information"
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                    title: "First Name",
                    inputType: "text",
                    name: "first_name",
                    autoComplete: "given-name",
                    onInputHandler: (e)=>{
                        /** @type {HTMLInputElement} */ // @ts-ignore
                        const inputEl = e.target;
                        if (inputEl.value.match(/./)) {
                            inputEl.classList.remove("warning");
                            setAlert(null);
                        } else {
                            inputEl.classList.add("warning");
                        }
                    },
                    required: true
                })
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                        htmlFor: "last_name",
                        children: "Last Name"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        type: "text",
                        name: "last_name",
                        id: "last_name",
                        placeholder: "Last Name",
                        autoComplete: "family-name",
                        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");
                            }
                        },
                        required: true
                    })
                ]
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                        htmlFor: "username",
                        children: "Username"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        type: "text",
                        name: "username",
                        id: "username",
                        placeholder: "Username",
                        autoComplete: "username",
                        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");
                            }
                            window.clearTimeout(timeout);
                            timeout = setTimeout(()=>{
                                (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z)(`/api/checkDuplicateData?type=username&value=${inputEl.value}&tableName=users&dbFullName=${targetDb}`).then((res)=>{
                                    // console.log(res);
                                    if (res?.result) {
                                        setAlert("Username Already Exists");
                                        inputEl.classList.add("warning");
                                    } else {
                                        setAlert(null);
                                        inputEl.classList.remove("warning");
                                    }
                                });
                            }, 300);
                        }
                    })
                ]
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                        htmlFor: "email_address",
                        children: "Email Address"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        type: "email",
                        name: "email_address",
                        id: "email_address",
                        placeholder: "Email Address",
                        autoComplete: "email",
                        onInput: (e)=>{
                            window.clearTimeout(timeout);
                            /** @type {HTMLInputElement} */ // @ts-ignore
                            const inputEl = e.target;
                            timeout = setTimeout(()=>{
                                (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .Z)(`/api/checkDuplicateData?type=email&value=${inputEl.value}&tableName=users&dbFullName=${targetDb}`).then((res)=>{
                                    // console.log(res);
                                    if (res?.result) {
                                        setAlert("Email Already Exists");
                                        inputEl.classList.add("warning");
                                    } else {
                                        setAlert(null);
                                        inputEl.classList.remove("warning");
                                    }
                                });
                            }, 300);
                        },
                        required: true
                    })
                ]
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                title: "Phone Number",
                inputType: "text",
                name: "phone",
                autoComplete: "tel"
            }),
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                title: "Address",
                name: "address",
                autoComplete: "address"
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "flex-wrap xl:flex-nowrap",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                        title: "City",
                        name: "city",
                        autoComplete: "city"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                        title: "State",
                        name: "state",
                        autoComplete: "state"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                        title: "Country",
                        name: "country",
                        autoComplete: "country"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_form_FormInput__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .Z, {
                        title: "Zip Code",
                        name: "zip_code",
                        autoComplete: "zip_code"
                    })
                ]
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                        htmlFor: "password",
                        children: "Password"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        type: "password",
                        name: "password",
                        id: "password",
                        placeholder: "Password",
                        required: true
                    })
                ]
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "flex flex-col items-start gap-0.5 w-full",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                        htmlFor: "confirm_password",
                        children: "Confirm Password"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                        type: "password",
                        name: "confirm_password",
                        id: "confirm_password",
                        placeholder: "Confirm Password",
                        onInput: (e)=>{
                            /** @type {HTMLInputElement} */ // @ts-ignore
                            const inputEl = e.target;
                            let passwordInput = inputEl.closest("form")?.["password"].value;
                            let passwordRepeatInput = inputEl.value;
                            if (passwordInput === passwordRepeatInput) {
                                inputEl.classList.remove("warning");
                            } else {
                                inputEl.classList.add("warning");
                            }
                        },
                        required: true
                    })
                ]
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                className: "paper",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("h3", {
                        className: "m-0 text-lg font-semibold mb-1 text-slate-600",
                        children: "User Image"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_UserImage__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .Z, {
                        userImage: userImage,
                        setUserImage: setUserImage,
                        className: "w-full"
                    })
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ })

};
;