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

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

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ ExistingFieldEdit)
/* 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 _MoreOptionsModal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4209);
/* harmony import */ var _fields_text_JSONTextOption__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4838);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6517);
/* harmony import */ var lodash__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_4__);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 




/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField
 * @param {number} props.fieldIndex
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} props.tableFields
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} props.setTableFields
 * @param {any} props.refreshFieldsListRef
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database
 * @param {import("@/package-shared/types").UserType} props.user
 * @param {React.Dispatch<React.SetStateAction<boolean>>} [props.setActiveEdit]
 * @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable]
 */ function ExistingFieldEdit({ targetField , fieldIndex , tableFields , setTableFields , refreshFieldsListRef , setActiveEdit , database , currentTable , user ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ const varcharDesc = "Varchar is simply letters and numbers within the range 0 - 255";
    let defaultType = targetField?.dataType ? targetField.dataType.replace(/\d|\(|\)/g, "") : null;
    let defaultDataTypeValue = targetField?.dataType ? targetField.dataType.replace(/[^\d]/g, "") : "200";
    const dataTypes = __webpack_require__(9594);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ /** @type {React.Ref<import("@/package-shared/types").DSQL_FieldSchemaType>} */ const initialField = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(targetField));
    const newFieldRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
    const [fieldData, setFieldData] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField);
    const [fieldName, setFieldName] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField?.fieldName);
    const [dataType, setDataType] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(defaultType);
    const [dataTypeValue, setDataTypeValue] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(defaultDataTypeValue);
    const [dataTypeDesc, setDataTypeDesc] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(varcharDesc);
    const [isRichText, setIsRichText] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField?.richText && !targetField?.encrypted ? "Yes" : "No");
    const isLiteral = Boolean(dataType?.match(/uuid/i));
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
        className: "w-full -mt-3 bg-white dark:bg-slate-800 flex-wrap",
        // @ts-ignore
        ref: newFieldRef,
        children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("form", {
            className: "flex flex-col xl:flex-row items-start gap-4 w-full justify-between border border-solid p-4 border-slate-200 dark:border-slate-600 rounded rounded-t-none focus:shadow-lg shadow-slate-700 dark:shadow-black relative flex-wrap",
            onSubmit: (e)=>{
                e.preventDefault();
                setTableFields((prev)=>{
                    let newArray = prev;
                    newArray[fieldIndex] = fieldData;
                    return newArray;
                });
                refreshFieldsListRef.current((/** @type {any} */ prev)=>prev + 1);
                /** @type {HTMLFormElement} */ // @ts-ignore
                const formEl = e.target;
                formEl.closest(".table-field-wrapper")?.querySelector(".edit-table-field-section")?.classList.toggle("hidden");
            },
            children: [
                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                    className: "gap-4 flex-wrap w-full md:w-auto flex-col xl:flex-row items-stretch",
                    children: [
                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                            className: "flex flex-col items-start gap-0.5",
                            children: [
                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                                    htmlFor: "new_field_name",
                                    children: "Field Name"
                                }),
                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                                    type: "text",
                                    name: "new_field_name",
                                    id: "new_field_name",
                                    placeholder: "Eg. post_title",
                                    onInput: async (e)=>{
                                        /** @type {HTMLInputElement} */ // @ts-ignore
                                        const inputEl = e.target;
                                        inputEl.value = inputEl.value.toLowerCase().replace(/ /g, "_");
                                        setFieldData((prev)=>{
                                            let existingFieldData = prev;
                                            existingFieldData.fieldName = inputEl.value;
                                            existingFieldData.updatedField = true;
                                            if (!existingFieldData.originName) existingFieldData.originName = fieldName;
                                            return existingFieldData;
                                        });
                                    },
                                    required: true,
                                    defaultValue: fieldName
                                })
                            ]
                        }),
                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                            className: "flex flex-col items-start gap-4 xl:gap-0.5",
                            children: [
                                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                                    className: "flex-wrap xl:flex-nowrap w-full md:w-auto",
                                    children: [
                                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                                            htmlFor: "new_field_data_type",
                                            children: "Data Type"
                                        }),
                                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                                            className: "dropdown-wrapper reversed text-sm items-start",
                                            children: [
                                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
                                                    className: "px-2 bg-slate-200 dark:bg-slate-700 rounded-full hover:bg-slate-100 dark:hover:bg-slate-600 hidden xl:flex",
                                                    children: "Info"
                                                }),
                                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                                                    className: "dropdown mt-0 xl:-mt-2",
                                                    children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
                                                        children: dataTypeDesc
                                                    })
                                                })
                                            ]
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                                    className: "w-auto",
                                    children: [
                                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("select", {
                                            name: "new_field_data_type",
                                            id: "new_field_data_type",
                                            className: "w-full xl-w-auto",
                                            onChange: (e)=>{
                                                /** @type {HTMLSelectElement} */ // @ts-ignore
                                                const selectEl = e.target;
                                                setDataType(selectEl.value);
                                                selectEl.childNodes.forEach((/** @type {any} */ option)=>{
                                                    if (option.value === selectEl.value && option.dataset.desc) {
                                                        setDataTypeDesc(option.dataset.desc);
                                                    }
                                                    if (option.value === selectEl.value && option.dataset.literal) {
                                                        fieldData.defaultValueLiteral = option.dataset.literal;
                                                        fieldData.nullValue = false;
                                                    } else {
                                                        delete fieldData.defaultValueLiteral;
                                                    }
                                                });
                                                targetField.dataType = selectEl.value + (selectEl.value.match(/VARCHAR/) ? `(${dataTypeValue ? dataTypeValue : 200})` : "");
                                            },
                                            defaultValue: dataType || undefined,
                                            children: dataTypes.map((type, index)=>{
                                                if (type.name.match(/VARCHAR/)) {
                                                    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                                                        value: type.name,
                                                        "data-desc": type.description,
                                                        children: type.title + "(" + (dataTypeValue ? dataTypeValue : 200) + ")"
                                                    }, index + 1);
                                                } else {
                                                    return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                                                        value: type.name,
                                                        "data-desc": type.description,
                                                        "data-literal": type.valueLiteral || undefined,
                                                        children: type.title
                                                    }, index + 1);
                                                }
                                            })
                                        }),
                                        dataType?.match(/VARCHAR/) && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                                            type: "number",
                                            defaultValue: dataTypeValue ? dataTypeValue : 200,
                                            className: "px-2",
                                            style: {
                                                maxWidth: "60px"
                                            },
                                            max: 255,
                                            min: 5,
                                            onChange: (e)=>{
                                                setDataTypeValue(e.target.value);
                                                targetField.dataType = dataType + `(${e.target.value})`;
                                            }
                                        })
                                    ]
                                })
                            ]
                        }),
                        dataType?.match(/text/i) && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
                            children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_fields_text_JSONTextOption__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z, {
                                targetField: targetField
                            })
                        }),
                        !targetField.dataType?.match(/text/i) && !isLiteral && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                            className: "flex flex-col items-start gap-0.5",
                            style: {
                                minWidth: "70px"
                            },
                            children: [
                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                                    htmlFor: "new_field_required",
                                    children: "Required?"
                                }),
                                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
                                    name: "new_field_required",
                                    id: "new_field_required",
                                    className: "px-2",
                                    defaultValue: targetField?.notNullValue ? "Yes" : "No",
                                    onChange: (e)=>{
                                        console.log(targetField);
                                        if (e.target.value === "Yes") {
                                            targetField.notNullValue = true;
                                        } else {
                                            targetField.notNullValue = false;
                                            delete targetField.notNullValue;
                                        // if (!targetField?.dataType?.match(/text/i)) {
                                        //     targetField.nullValue = true;
                                        // }
                                        }
                                    },
                                    children: [
                                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                                            value: "No",
                                            children: "No"
                                        }),
                                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                                            value: "Yes",
                                            children: "Yes"
                                        })
                                    ]
                                })
                            ]
                        }),
                        !isLiteral && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                            className: "flex flex-col items-start gap-0.5",
                            children: [
                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                                    htmlFor: "new_field_default_value",
                                    children: fieldData?.dataType?.match(/text$/i) ? "Can't Set Default for text values" : "Default Value (optional)"
                                }),
                                /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("input", {
                                    type: "text",
                                    name: "new_field_default_value",
                                    id: "new_field_default_value",
                                    className: fieldData?.dataType?.match(/text$/i) ? "pointer-events-none opacity-50" : "",
                                    placeholder: "Default Value",
                                    defaultValue: fieldData?.defaultValue ? fieldData.defaultValue : fieldData?.nullValue ? "NULL" : "",
                                    onInput: (e)=>{
                                        /** @type {HTMLInputElement} */ // @ts-ignore
                                        const inputEl = e.target;
                                        if (fieldData.dataType?.match(/text$/i)) return;
                                        setFieldData((prev)=>{
                                            let newFieldData = prev;
                                            if (inputEl.value.match(/./)) {
                                                delete newFieldData.notNullValue;
                                            } else {
                                                delete newFieldData.defaultValue;
                                                delete newFieldData.nullValue;
                                            }
                                            if (inputEl.value.match(/^null$/i)) {
                                                delete newFieldData.defaultValue;
                                                newFieldData.nullValue = true;
                                            } else if (inputEl.value.match(/./)) {
                                                delete newFieldData.nullValue;
                                                newFieldData.defaultValue = inputEl.value;
                                            }
                                            return newFieldData;
                                        });
                                    }
                                })
                            ]
                        }),
                        !isLiteral && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(_MoreOptionsModal__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z, {
                            database,
                            setFieldData,
                            setTableFields,
                            tableFields,
                            targetField,
                            user,
                            currentTable,
                            fieldIndex
                        })
                    ]
                }),
                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                    className: "secondary mt-auto flex-wrap w-full xl:w-auto",
                    children: [
                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                            type: "submit",
                            className: "secondary mt-auto py-3 w-full md:w-auto grow",
                            children: "Save Updates"
                        }),
                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                            className: "button outlined gray mt-auto py-2.5 w-full md:w-auto justify-center grow",
                            onClick: (e)=>{
                                if (initialField.current) targetField = lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(initialField.current);
                                setTableFields((prev)=>{
                                    const newFields = lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(prev);
                                    if (fieldIndex && initialField.current) newFields[fieldIndex] = lodash__WEBPACK_IMPORTED_MODULE_4___default().cloneDeep(initialField.current);
                                    return newFields;
                                });
                                if (setActiveEdit) setActiveEdit(false);
                            },
                            children: "Cancel"
                        })
                    ]
                })
            ]
        })
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ }),

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


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

// 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: external "@mui/icons-material/Close"
var Close_ = __webpack_require__(4173);
// EXTERNAL MODULE: ./components/form/FormInput.jsx + 2 modules
var FormInput = __webpack_require__(7901);
// EXTERNAL MODULE: external "lucide-react"
var external_lucide_react_ = __webpack_require__(2423);
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/CSSFiles.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 



/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
 */ function CSSFiles({ targetField  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ if (!targetField?.richText) return null;
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ /** @type {[ state: string[], dispatch: React.Dispatch<React.SetStateAction<string[]>> ]} */ // @ts-ignore
    const [cssFiles, setCssFiles] = external_react_default().useState(targetField.cssFiles || []);
    /** @type {React.Ref<HTMLInputElement | null>} */ const cssFileInputRef = external_react_default().useRef(null);
    external_react_default().useEffect(()=>{
        targetField.cssFiles = cssFiles;
    }, [
        cssFiles
    ]);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "flex flex-col items-start gap-2 w-full my-4",
        style: {
            minWidth: "70px"
        },
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx("span", {
                className: "label text-xs text-slate-500",
                children: "Add CSS"
            }),
            cssFiles.map((url, index)=>/*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                    className: "relative border border-solid border-slate-300 text-xs px-2 py-1 rounded-full",
                    children: [
                        /*#__PURE__*/ jsx_runtime_.jsx("span", {
                            children: url
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx(external_lucide_react_.X, {
                            size: 20,
                            onClick: ()=>{
                                setCssFiles((prev)=>prev.filter((ln)=>ln !== url));
                            },
                            className: "cursor-pointer hover:opacity-60 "
                        })
                    ]
                }, index + 1)),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                className: "row w-full",
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx(FormInput/* default */.Z, {
                        name: "css-file",
                        placeholder: "CSS file URL",
                        elementRef: cssFileInputRef
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("button", {
                        className: "secondary outlined",
                        onClick: ()=>{
                            const url = cssFileInputRef.current?.value;
                            if (url?.match(/./)) {
                                setCssFiles((prev)=>[
                                        ...new Set([
                                            ...prev,
                                            url
                                        ])
                                    ]);
                            }
                        },
                        children: "Add"
                    })
                ]
            }),
            /*#__PURE__*/ jsx_runtime_.jsx("span", {
                className: "text-sm text-slate-600",
                children: "Add CSS files to your Rich Text field"
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/EncryptionSelect.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 

/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let EncryptionSelect_timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} props.setFieldData - React state dispatch function
 */ function EncryptionSelect({ targetField , setFieldData  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "flex flex-col items-start gap-0.5 w-full",
        style: {
            minWidth: "70px"
        },
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx("label", {
                htmlFor: "encryption_field",
                children: "Encrypt?"
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("select", {
                name: "encryption_field",
                id: "encryption_field",
                className: "px-2",
                defaultValue: targetField?.encrypted ? "Yes" : "No",
                onChange: (e)=>{
                    if (setFieldData) {
                        setFieldData((prev)=>{
                            let existingFieldData = prev;
                            if (e.target.value.match(/yes/i)) {
                                existingFieldData.encrypted = true;
                            } else {
                                existingFieldData.encrypted = false;
                                delete existingFieldData.encrypted;
                            }
                            return existingFieldData;
                        });
                    }
                },
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("option", {
                        value: "No",
                        children: "No"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("option", {
                        value: "Yes",
                        children: "Yes"
                    })
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

// EXTERNAL MODULE: ./components/admin/databases/fields/fields-inputs/ForeignKey.jsx
var ForeignKey = __webpack_require__(3699);
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/AutoIncrement.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 

/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let AutoIncrement_timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} [props.setFieldData] - React state dispatch function
 */ function AutoIncrement({ targetField , setFieldData  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ return null;
    if (!targetField?.dataType?.match(/int$/i)) {
        return null;
    }
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "flex flex-col items-start gap-0.5 w-full",
        style: {
            minWidth: "70px"
        },
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx("label", {
                htmlFor: "encryption_field",
                children: "Auto Increment?"
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("select", {
                name: "encryption_field",
                id: "encryption_field",
                className: "px-2",
                defaultValue: targetField?.autoIncrement ? "Yes" : "No",
                onChange: (e)=>{
                    if (targetField) {
                        if (e.target.value?.match(/yes/i)) {
                            targetField.autoIncrement = true;
                        } else {
                            delete targetField.autoIncrement;
                        }
                    }
                },
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("option", {
                        value: "No",
                        children: "No"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("option", {
                        value: "Yes",
                        children: "Yes"
                    })
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/RegexPattern.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 

/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let RegexPattern_timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
 */ function RegexPattern({ targetField  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "flex flex-col items-start gap-2 w-full",
        style: {
            minWidth: "70px"
        },
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx("label", {
                htmlFor: "encryption_field",
                children: "Pattern"
            }),
            /*#__PURE__*/ jsx_runtime_.jsx("span", {
                className: "text-sm text-slate-500",
                children: 'This describes a pattern that must be matched for this field to be valid. If you add a pattern and make a db entry that doesn\'t match, the entry will be "NULL" or an empty string or the default value.'
            }),
            /*#__PURE__*/ jsx_runtime_.jsx("input", {
                type: "text",
                placeholder: "Regex Pattern. Eg: '\\\\.[a-z]+'",
                onInput: (e)=>{
                    /** @type {HTMLInputElement} */ // @ts-ignore
                    const inputEl = e.target;
                    if (inputEl?.value?.length > 0) {
                        targetField.pattern = inputEl.value;
                    } else {
                        delete targetField.pattern;
                    }
                },
                defaultValue: targetField?.pattern
            }),
            /*#__PURE__*/ jsx_runtime_.jsx("input", {
                type: "text",
                placeholder: "Regex Pattern Flags. Eg: igm",
                onInput: (e)=>{
                    /** @type {HTMLInputElement} */ // @ts-ignore
                    const inputEl = e.target;
                    if (inputEl?.value?.length > 0) {
                        targetField.patternFlags = inputEl.value;
                    } else {
                        delete targetField.patternFlags;
                    }
                },
                defaultValue: targetField?.patternFlags
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

// EXTERNAL MODULE: external "lodash"
var external_lodash_ = __webpack_require__(6517);
var external_lodash_default = /*#__PURE__*/__webpack_require__.n(external_lodash_);
// EXTERNAL MODULE: ./components/general/Modal.jsx
var Modal = __webpack_require__(9471);
;// CONCATENATED MODULE: ./components/admin/databases/fields/fields-inputs/UniqueFieldSelect.jsx
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 

/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} props.setFieldData - React state dispatch function
 */ function UniqueFieldSelect({ targetField , setFieldData  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
        className: "flex flex-col items-start gap-0.5 w-full",
        style: {
            minWidth: "70px"
        },
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx("label", {
                htmlFor: "unique_field",
                children: "Unique Field?"
            }),
            /*#__PURE__*/ (0,jsx_runtime_.jsxs)("select", {
                name: "unique_field",
                id: "unique_field",
                className: "px-2",
                defaultValue: targetField?.unique ? "Yes" : "No",
                onChange: (e)=>{
                    if (setFieldData) {
                        setFieldData((prev)=>{
                            let existingFieldData = prev;
                            if (e.target.value.match(/yes/i)) {
                                existingFieldData.unique = true;
                            } else {
                                existingFieldData.unique = false;
                                delete existingFieldData.unique;
                            }
                            return existingFieldData;
                        });
                    }
                },
                children: [
                    /*#__PURE__*/ jsx_runtime_.jsx("option", {
                        value: "No",
                        children: "No"
                    }),
                    /*#__PURE__*/ jsx_runtime_.jsx("option", {
                        value: "Yes",
                        children: "Yes"
                    })
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 

;// CONCATENATED MODULE: ./components/admin/databases/MoreOptionsModal.jsx
// @ts-check
/** # MODULE TRACE 
======================================================================
 * Detected 2 files that call this module. The files are listed below:
======================================================================
 * `import` Statement Found in [ExistingFieldEdit.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\ExistingFieldEdit.jsx
 * `import` Statement Found in [NewFieldTemp.jsx] => file:///d:\GitHub\datasquirel\components\admin\databases\NewFieldTemp.jsx
==== MODULE TRACE END ==== */ /**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 










/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
 * @param {Object} props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} props.setFieldData
 * @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable]
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} [props.tableFields]
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} [props.setTableFields]
 * @param {import("@/package-shared/types").UserType} props.user
 * @param {number} props.fieldIndex
 */ function MoreOptionsModal({ targetField , currentTable , database , tableFields , setTableFields , setFieldData , user , fieldIndex ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const [openExtraOptions, setOpenExtraOptions] = external_react_default().useState(false);
    /** @type {React.Ref<import("@/package-shared/types").DSQL_FieldSchemaType>} */ const initialField = external_react_default().useRef(external_lodash_default().cloneDeep(targetField));
    external_react_default().useEffect(()=>{}, []);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,jsx_runtime_.jsxs)((external_react_default()).Fragment, {
        children: [
            /*#__PURE__*/ jsx_runtime_.jsx("span", {
                className: "button outlined gray mt-5 w-full xl:w-auto",
                onClick: ()=>{
                    setOpenExtraOptions(true);
                },
                children: "More"
            }),
            /*#__PURE__*/ jsx_runtime_.jsx(Modal/* default */.Z, {
                open: openExtraOptions,
                onClose: ()=>{
                    if (initialField.current) {
                        const oldTargetField = external_lodash_default().cloneDeep(initialField.current);
                        targetField = oldTargetField;
                    }
                    setOpenExtraOptions(false);
                },
                maxWidth: "600px",
                children: /*#__PURE__*/ (0,jsx_runtime_.jsxs)("div", {
                    className: "m-auto flex flex-col max-w-xl w-full max-h-[90vh] overflow-y-auto",
                    children: [
                        /*#__PURE__*/ jsx_runtime_.jsx("div", {
                            className: "w-full justify-between",
                            children: /*#__PURE__*/ jsx_runtime_.jsx("span", {
                                className: "text-xl",
                                children: "More Options"
                            })
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx(CSSFiles, {
                            targetField: targetField
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx(UniqueFieldSelect, {
                            targetField: targetField,
                            setFieldData: setFieldData
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx(EncryptionSelect, {
                            targetField: targetField,
                            setFieldData: setFieldData
                        }),
                        currentTable && /*#__PURE__*/ jsx_runtime_.jsx(ForeignKey/* default */.Z, {
                            targetField: targetField,
                            setFieldData: setFieldData,
                            database: database,
                            tableFields: tableFields,
                            setTableFields: setTableFields,
                            currentTable: currentTable,
                            user: user
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx(AutoIncrement, {
                            targetField: targetField,
                            setFieldData: setFieldData
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx(RegexPattern, {
                            targetField: targetField
                        }),
                        /*#__PURE__*/ jsx_runtime_.jsx("button", {
                            className: "w-full outlined more-padding",
                            onClick: ()=>{
                                setOpenExtraOptions(false);
                            },
                            children: "Done"
                        })
                    ]
                })
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ }),

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

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ ForeignKey)
/* 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_3__ = __webpack_require__(6729);
/* harmony import */ var _general_LoadingBlock__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5264);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 



/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - DSQL schema field object
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>} [props.setFieldData] - React state dispatch function
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType[]} [props.tableFields] - All Fields Array
 * @param {React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>} [props.setTableFields] - React state dispatch function
 * @param {import("@/package-shared/types").DSQL_MYSQL_user_databases_Type} props.database - MYSQL user_databases object
 * @param {import("@/package-shared/types").DSQL_TableSchemaType} [props.currentTable] - MYSQL user_databases object
 * @param {import("@/package-shared/types").UserType} [props.user] - User object
 * @param {React.Dispatch<React.SetStateAction<boolean>>} [props.setActiveEdit] - React state dispatch function
 * @param {boolean} [props.activeClonedTable] - Is table an active clone?
 */ function ForeignKey({ targetField , setFieldData , tableFields , setTableFields , database , currentTable , user , setActiveEdit , activeClonedTable ,  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ const [isForeignKey, setIsForeignKey] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(targetField?.foreignKey ? true : false);
    /** @type {any} */ const tablesState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
    /** @type {[import("@/package-shared/types").DSQL_TableSchemaType[] | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_TableSchemaType[]>>]} */ const [tables, setTables] = tablesState;
    /** @type {any} */ const foreignKeyTableState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
    /** @type {[import("@/package-shared/types").DSQL_TableSchemaType | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_TableSchemaType>>]} */ const [foreignKeyTable, setForeignKeyTable] = foreignKeyTableState;
    /** @type {any} */ const columnsState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
    /** @type {[import("@/package-shared/types").DSQL_FieldSchemaType[] | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType[]>>]} */ const [columns, setColumns] = columnsState;
    /** @type {any} */ const foreignKeyTableColumnState = react__WEBPACK_IMPORTED_MODULE_1___default().useState(null);
    /** @type {[import("@/package-shared/types").DSQL_FieldSchemaType | null, React.Dispatch<React.SetStateAction<import("@/package-shared/types").DSQL_FieldSchemaType>>]} */ const [foreignKeyTableColumn, setForeignKeyTableColumn] = foreignKeyTableColumnState;
    const [loading, setLoading] = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false);
    react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{
        if (!isForeignKey && !targetField?.foreignKey) return;
        // const fetchUrl =`/api/getUserSchemaData?dbSlug=${database.db_slug}${window.location.search.match("delegated=true") ? "&delegated=true" : ""}`;
        (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)(`/api/getUserSchemaData`).then((res)=>{
            if (res.success) {
                try {
                    /** @type {import("@/package-shared/types").DSQL_DatabaseSchemaType[]} */ const userSchemaData = res.schemaData;
                    const targetDatabase = userSchemaData.filter((db)=>db.dbFullName === database.db_full_name);
                    const filteredTables = currentTable ? targetDatabase[0].tables.filter((table)=>table.tableName !== currentTable.tableName) : targetDatabase[0].tables;
                    setTables(filteredTables);
                    if (targetField?.foreignKey) {
                        const destinationTargetTable = filteredTables.filter((table)=>table.tableName === targetField?.foreignKey?.destinationTableName);
                        setForeignKeyTable(destinationTargetTable[0]);
                        if (destinationTargetTable[0]?.fields) setColumns(destinationTargetTable[0].fields);
                    }
                // const targetTable = targetDatabase[0].tables.filter(table => table.tableName === "")
                } catch (/** @type {any} */ error) {
                    (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)("/api/admin/clientError", {
                        method: "post",
                        body: {
                            component: "ForeignKey/fetch-error-getUserSchemaData/lines-65-77",
                            message: error.message,
                            user: user
                        }
                    });
                }
            }
        });
    }, [
        isForeignKey
    ]);
    ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
        className: "flex flex-col items-start gap-2 w-full mt-2 relative",
        style: {
            minWidth: "70px"
        },
        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)("label", {
                htmlFor: "foreign_key_field",
                className: "flex flex-wrap items-center gap-2 mt-2",
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
                        children: "Foreign Key?"
                    }),
                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
                        className: "dropdown-wrapper reversed text-sm items-start",
                        children: [
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
                                className: "px-2 bg-slate-200 rounded-full hover:bg-slate-100 hidden xl:flex text-slate-600",
                                children: "Info"
                            }),
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
                                className: "dropdown mt-0 xl:-mt-2",
                                children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("span", {
                                    children: "Foriegn key links the current table to another table"
                                })
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
                name: "foreign_key_field",
                id: "foreign_key_field",
                className: "px-2",
                defaultValue: targetField?.foreignKey ? "Yes" : "No",
                onChange: (e)=>{
                    if (e.target.value.match(/yes/i)) {
                        setIsForeignKey(true);
                        if (setFieldData) {
                            setFieldData((prev)=>{
                                let existingFieldData = prev;
                                existingFieldData["foreignKey"] = {
                                    foreignKeyName: undefined,
                                    destinationTableName: undefined,
                                    destinationTableColumnName: undefined,
                                    cascadeDelete: true
                                };
                                return existingFieldData;
                            });
                        }
                    } else {
                        setIsForeignKey(false);
                        if (setFieldData) {
                            setFieldData((prev)=>{
                                let existingFieldData = prev;
                                delete existingFieldData.foreignKey;
                                return existingFieldData;
                            });
                        }
                    }
                },
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "No",
                        children: "No"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "Yes",
                        children: "Yes"
                    })
                ]
            }),
            isForeignKey && tables && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
                children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
                    name: "foreign_key_destination_table_name",
                    id: "foreign_key_destination_table_name",
                    className: "px-2",
                    defaultValue: targetField?.foreignKey?.destinationTableName ? targetField.foreignKey.destinationTableName : undefined,
                    onChange: (e)=>{
                        /** @type {HTMLSelectElement} */ const selectEl = e.target;
                        if (e.target.value?.match(/--/)) {
                            if (setFieldData) {
                                setFieldData((prev)=>{
                                    let existingFieldData = prev;
                                    /** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
                                    if (targetForeignKey) targetForeignKey.destinationTableName = undefined;
                                    return existingFieldData;
                                });
                            } else {
                                selectEl.dataset.destinationTableName = undefined;
                            }
                            return;
                        }
                        const targetTable = tables.filter((tb)=>tb.tableName === e.target.value)[0];
                        setForeignKeyTable(targetTable);
                        if (targetTable?.fields) setColumns(targetTable.fields);
                        if (setFieldData) {
                            setFieldData((prev)=>{
                                let existingFieldData = prev;
                                /** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
                                if (targetForeignKey) targetForeignKey.destinationTableName = e.target.value;
                                return existingFieldData;
                            });
                        } else {
                            e.target.dataset.destinationTableName = e.target.value;
                        }
                    },
                    children: [
                        /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                            value: "--",
                            children: "--Select Table--"
                        }),
                        tables.map((table, index)=>{
                            return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                                value: table.tableName,
                                children: table.tableFullName
                            }, index + 1);
                        })
                    ]
                })
            }),
            foreignKeyTable && columns && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
                children: [
                    /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
                        name: "foreign_key_destination_table_column_name",
                        id: "foreign_key_destination_table_column_name",
                        className: "px-2",
                        defaultValue: targetField?.foreignKey?.destinationTableColumnName ? targetField.foreignKey.destinationTableColumnName : undefined,
                        onChange: (e)=>{
                            try {
                                const targetColumn = columns.filter((column)=>column.fieldName === e.target.value)[0];
                                setForeignKeyTableColumn(targetColumn);
                                if (e.target.value?.match(/--/)) {
                                    if (setFieldData) {
                                        setFieldData((prev)=>{
                                            let existingFieldData = prev;
                                            /** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
                                            if (targetForeignKey) targetForeignKey.destinationTableColumnName = undefined;
                                            return existingFieldData;
                                        });
                                    }
                                    return;
                                }
                                const keyName = `dsql_${database.user_id}_${database.db_slug}_${Date.now()}`;
                                if (setFieldData) {
                                    setFieldData((prev)=>{
                                        let existingFieldData = prev;
                                        existingFieldData.dataType = targetColumn.dataType;
                                        /** @type {import("@/package-shared/types").DSQL_ForeignKeyType|undefined} */ const targetForeignKey = existingFieldData.foreignKey;
                                        if (targetForeignKey) {
                                            targetForeignKey.destinationTableColumnName = targetColumn.fieldName;
                                            targetForeignKey.destinationTableColumnType = targetColumn.dataType;
                                            targetForeignKey.foreignKeyName = keyName;
                                        }
                                        return existingFieldData;
                                    });
                                } else {
                                    e.target.dataset.dataType = targetColumn.dataType;
                                    e.target.dataset.destinationTableColumnName = targetColumn.fieldName;
                                    // e.target.dataset.foreignKeyName = `dsql_${user.id}_${tableName}_table_${targetField?.fieldName ? targetField.fieldName : "{{__tmp_field_name}}"}_${foreignKeyTable.tableName}_${targetColumn.fieldName}_ref`;
                                    e.target.dataset.foreignKeyName = keyName;
                                }
                            } catch (/** @type {any} */ error) {
                                (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)("/api/admin/clientError", {
                                    method: "post",
                                    body: {
                                        component: "ForeignKey/lines-232-264",
                                        message: error.message,
                                        user: user
                                    }
                                });
                            }
                        },
                        children: [
                            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                                value: "--",
                                children: "--Select Column--"
                            }),
                            columns.map((field, index)=>{
                                return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                                    value: field.fieldName,
                                    children: field.fieldName
                                }, index + 1);
                            })
                        ]
                    }),
                    activeClonedTable && foreignKeyTableColumn && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                        className: "secondary w-full",
                        onClick: (e)=>{
                            setLoading(true);
                            (0,_functions_frontend_fetchApi__WEBPACK_IMPORTED_MODULE_3__/* ["default"] */ .Z)("/api/updateClonedTableForeignKeys", {
                                method: "post",
                                body: {
                                    tableData: currentTable,
                                    database: database.db_full_name,
                                    dbSlug: database.db_slug,
                                    delegated: window.location?.search?.match(/delegated=true/i) ? true : false
                                }
                            }, true).then((res)=>{
                                if (res.success) {
                                    window.alert("Foreign Key Added Successfully!");
                                } else {
                                    window.alert("Update Failed, Please Try again.");
                                }
                                setTimeout(()=>{
                                    if (setActiveEdit) setActiveEdit(false);
                                }, 1000);
                            });
                        },
                        children: "Add Foreign Key"
                    })
                ]
            }),
            activeClonedTable && /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
                className: "light-gray w-full",
                onClick: (e)=>{
                    delete targetField.foreignKey;
                    setActiveEdit && setActiveEdit(false);
                },
                children: "Cancel"
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ }),

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

/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Z": () => (/* binding */ JSONTextOption)
/* 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__);
// @ts-check
/**
 * ==============================================================================
 * Imports
 * ==============================================================================
 */ 

/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ let timeout;
/** ****************************************************************************** */ /**
 * ==============================================================================
 * Main Component { Functional }
 * ==============================================================================
 * @param {Object} props - Server props
 * @param {import("@/package-shared/types").DSQL_FieldSchemaType} props.targetField - Field object
 */ function JSONTextOption({ targetField  }) {
    /**
     * Get Contexts
     *
     * @abstract { React.useContext }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Javascript Variables
     *
     * @abstract Non hook variables and functions
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * React Hooks
     *
     * @abstract { useState, useEffect, useRef, etc ... }
     */ ////////////////////////////////////////
    ////////////////////////////////////////
    ////////////////////////////////////////
    /**
     * Function Return
     *
     * @abstract Main Function Return
     */ return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
        className: "flex flex-col items-start gap-0.5",
        style: {
            minWidth: "70px"
        },
        children: [
            /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("label", {
                htmlFor: "rich_text_option",
                children: "Text Type"
            }),
            /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("select", {
                name: "rich_text_option",
                id: "rich_text_option",
                className: "px-2",
                onChange: (e)=>{
                    delete targetField.json;
                    delete targetField.richText;
                    delete targetField.yaml;
                    delete targetField.html;
                    delete targetField.javascript;
                    delete targetField.shell;
                    switch(e.target.value){
                        case "plain":
                            break;
                        case "rte":
                            targetField.richText = true;
                            break;
                        case "json":
                            targetField.json = true;
                            break;
                        case "yaml":
                            targetField.yaml = true;
                            break;
                        case "html":
                            targetField.html = true;
                            break;
                        case "css":
                            targetField.css = true;
                            break;
                        case "javascript":
                            targetField.javascript = true;
                            break;
                        case "shell":
                            targetField.shell = true;
                            break;
                        default:
                            break;
                    }
                },
                defaultValue: (()=>{
                    if (targetField.richText) return "rte";
                    if (targetField.json) return "json";
                    if (targetField.yaml) return "yaml";
                    if (targetField.html) return "html";
                    if (targetField.javascript) return "javascript";
                    if (targetField.shell) return "shell";
                    if (targetField.css) return "css";
                    return "plain";
                })(),
                children: [
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "plain",
                        children: "Plain Text"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "rte",
                        children: "Rich Text"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "json",
                        children: "JSON"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "yaml",
                        children: "YAML"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "html",
                        children: "HTML"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "css",
                        children: "CSS"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "javascript",
                        children: "Javascript"
                    }),
                    /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("option", {
                        value: "shell",
                        children: "Shell"
                    })
                ]
            })
        ]
    });
////////////////////////////////////////
////////////////////////////////////////
////////////////////////////////////////
} /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */  /** ****************************************************************************** */ 


/***/ })

};
;