import CardSelect from "../../CardSelect/CardSelect";
import CategoryCheckbox from "../../CategoryCheckbox/Index";
import CheckboxElement from "../../Checkbox/Checkbox";
import CodeEditor from "../../CodeEditor/CodeEditor";
import DictionaryForm, { ValueType } from "../../Dictionary/Dictionary";
import Dropdown from "../../Dropdown/Dropdown";
import EntityDropdown from "../../EntityDropdown/EntityDropdown";
import FilePicker from "../../FilePicker/FilePicker";
import Input from "../../Input/Input";
import TimePicker from "../../TimePicker/Index";
import Link from "../../Link/Link";
import Modal from "../../Modal/Modal";
import IDGenerator from "../../ObjectID/IDGenerator";
import RadioButtons from "../../RadioButtons/GroupRadioButtons";
import TextArea from "../../TextArea/TextArea";
import Toggle from "../../Toggle/Toggle";
import ColorPicker from "../Fields/ColorPicker";
import IconPicker from "../Fields/IconPicker";
import FieldLabelElement from "../Fields/FieldLabel";
import { FormFieldStyleType } from "../Types/Field";
import FormFieldSchemaType from "../Types/FormFieldSchemaType";
import FileModel from "../../../../Models/DatabaseModels/DatabaseBaseModel/FileModel";
import CodeType from "../../../../Types/Code/CodeType";
import OneUptimeDate from "../../../../Types/Date";
import BadDataException from "../../../../Types/Exception/BadDataException";
import MimeType from "../../../../Types/File/MimeType";
import Typeof from "../../../../Types/Typeof";
import React, { useEffect } from "react";
import Radio from "../../Radio/Radio";
import HorizontalRule from "../../HorizontalRule/HorizontalRule";
import MarkdownEditor from "../../Markdown.tsx/MarkdownEditor";
import useTranslateValue from "../../../Utils/Translation";
const FormField = (props) => {
    const { translateString } = useTranslateValue();
    const translatedPlaceholder = translateString(props.field.placeholder);
    const onChange = (value) => {
        if (props.field.onChange) {
            props.field.onChange(value, props.currentValues, (newFormValues) => {
                var _a;
                (_a = props.setFormValues) === null || _a === void 0 ? void 0 : _a.call(props, newFormValues);
            });
        }
    };
    const getFieldType = (fieldType) => {
        switch (fieldType) {
            case FormFieldSchemaType.Email:
                return "email";
            case FormFieldSchemaType.Password:
                return "password";
            case FormFieldSchemaType.EncryptedText:
                return "password";
            case FormFieldSchemaType.Number:
                return "number";
            case FormFieldSchemaType.Date:
                return "date";
            case FormFieldSchemaType.DateTime:
                return "datetime-local";
            case FormFieldSchemaType.Time:
                return "time";
            case FormFieldSchemaType.LongText:
                return "textarea";
            case FormFieldSchemaType.Color:
                return "color";
            case FormFieldSchemaType.URL:
                return "url";
            case FormFieldSchemaType.PositiveNumber:
                return "number";
            default:
                return "text";
        }
    };
    const getAutoComplete = (fieldType) => {
        switch (fieldType) {
            case FormFieldSchemaType.Email:
                return "email";
            case FormFieldSchemaType.Password:
                return "current-password";
            case FormFieldSchemaType.Phone:
                return "tel";
            case FormFieldSchemaType.Name:
                return "name";
            case FormFieldSchemaType.URL:
                return "url";
            default:
                return undefined;
        }
    };
    const getFormField = () => {
        var _a, _b, _c;
        const [showMultiSelectCheckboxCategoryModal, setShowMultiSelectCheckboxCategoryModal,] = React.useState(false);
        const [checkboxCategoryValues, setCheckboxCategoryValues] = React.useState(props.currentValues && props.currentValues[props.fieldName]
            ? props.currentValues[props.fieldName]
            : []);
        useEffect(() => {
            setCheckboxCategoryValues(props.currentValues && props.currentValues[props.fieldName]
                ? props.currentValues[props.fieldName]
                : []);
        }, [props.currentValues]);
        const getMultiSelectCheckboxCategoryModal = () => {
            var _a, _b;
            return (React.createElement(Modal, { title: `${props.field.title}`, description: `${props.field.description}`, onSubmit: () => {
                    setShowMultiSelectCheckboxCategoryModal(false);
                    onChange(checkboxCategoryValues);
                    props.setFieldValue(props.fieldName, checkboxCategoryValues);
                }, onClose: () => {
                    setShowMultiSelectCheckboxCategoryModal(false);
                } },
                React.createElement("div", { className: "max-h-96 overflow-y-auto" },
                    React.createElement(CategoryCheckbox, { categories: ((_a = props.field.selectByAccessControlProps) === null || _a === void 0 ? void 0 : _a.categoryCheckboxProps.categories) || [], options: ((_b = props.field.selectByAccessControlProps) === null || _b === void 0 ? void 0 : _b.categoryCheckboxProps.options) || [], onChange: (value) => {
                            setCheckboxCategoryValues(value);
                        }, initialValue: checkboxCategoryValues }))));
        };
        const index = props.index + 1;
        const fieldType = props.field.fieldType
            ? getFieldType(props.field.fieldType)
            : "text";
        const isFileField = props.field.fieldType === FormFieldSchemaType.File ||
            props.field.fieldType === FormFieldSchemaType.ImageFile ||
            props.field.fieldType === FormFieldSchemaType.MultipleFiles;
        const isMultiFileField = props.field.fieldType === FormFieldSchemaType.MultipleFiles;
        if (Object.keys(props.field.field || {}).length === 0) {
            throw new BadDataException("Object cannot be without Field");
        }
        if (props.field.showIf && !props.field.showIf(props.currentValues)) {
            return React.createElement(React.Fragment, null);
        }
        let required = false;
        if (props.field.required &&
            typeof props.field.required === Typeof.Boolean) {
            required = true;
        }
        else if (props.field.required &&
            typeof props.field.required === "function" &&
            props.field.required(props.currentValues)) {
            required = true;
        }
        let codeType = CodeType.HTML;
        if (props.field.fieldType === FormFieldSchemaType.CSS) {
            codeType = CodeType.CSS;
        }
        if (props.field.fieldType === FormFieldSchemaType.JavaScript) {
            codeType = CodeType.JavaScript;
        }
        let fieldDescription = props.field.description;
        if (props.field.fieldType === FormFieldSchemaType.DateTime ||
            props.field.fieldType === FormFieldSchemaType.Time) {
            if (!fieldDescription) {
                fieldDescription = "";
            }
            fieldDescription +=
                " This is in your local timezone - " +
                    OneUptimeDate.getCurrentTimezoneString();
        }
        const getFieldDescription = () => {
            if (props.field.fieldType === FormFieldSchemaType.MultiSelectDropdown &&
                props.field.selectByAccessControlProps) {
                return (React.createElement("span", null,
                    fieldDescription,
                    React.createElement(Link, { onClick: () => {
                            setShowMultiSelectCheckboxCategoryModal(true);
                        }, className: "ml-1 underline text-blue-500 cursor-pointer" },
                        React.createElement("span", null,
                            "Select items by",
                            " ",
                            props.field.selectByAccessControlProps
                                .accessControlColumnTitle || ""))));
            }
            if (fieldDescription) {
                return fieldDescription;
            }
            return React.createElement(React.Fragment, null);
        };
        let booleanValue = false;
        //toggle
        if (props.field.fieldType === FormFieldSchemaType.Toggle) {
            booleanValue =
                (props.currentValues &&
                    (props.currentValues[props.fieldName] === true ||
                        props.currentValues[props.fieldName] === false)
                    ? props.currentValues[props.fieldName]
                    : props.field.defaultValue) || false;
        }
        return (React.createElement("div", { className: "sm:col-span-4 mt-0 mb-2", key: props.fieldName },
            props.field.showHorizontalRuleAbove && React.createElement(HorizontalRule, null),
            props.field.fieldType !== FormFieldSchemaType.Checkbox && (React.createElement(FieldLabelElement, { title: props.field.title || "", description: getFieldDescription(), sideLink: props.field.sideLink, required: required, hideOptionalLabel: props.field.hideOptionalLabel, isHeading: props.field.styleType === FormFieldStyleType.Heading })),
            React.createElement("div", { className: "mt-2" },
                props.field.fieldType === FormFieldSchemaType.Time && (React.createElement(TimePicker, { autoFocus: !props.disableAutofocus && index === 1, tabIndex: index, disabled: props.isDisabled || props.field.disabled, error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, value: (props.currentValues &&
                        props.currentValues[props.fieldName]) ||
                        props.field.defaultValue ||
                        undefined, placeholder: translatedPlaceholder || undefined })),
                props.field.fieldType === FormFieldSchemaType.Color && (React.createElement(ColorPicker, { error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                        props.setFieldTouched(props.fieldName, true);
                    }, tabIndex: index, placeholder: translatedPlaceholder || "", initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "" })),
                props.field.fieldType === FormFieldSchemaType.Icon && (React.createElement(IconPicker, { error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                        props.setFieldTouched(props.fieldName, true);
                    }, tabIndex: index, placeholder: translatedPlaceholder || "", initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : undefined })),
                (props.field.fieldType === FormFieldSchemaType.Dropdown ||
                    props.field.fieldType ===
                        FormFieldSchemaType.MultiSelectDropdown) &&
                    /*
                     * Entity-backed dropdowns (dropdownModal set) route through the
                     * new EntityDropdown — server-side lazy search, optional Labels
                     * tab for multi-select on labeled entities. Static enum-style
                     * dropdowns (no dropdownModal) keep the existing react-select
                     * Dropdown until we have a reason to migrate enum lists too.
                     */
                    (props.field.dropdownModal && props.field.dropdownModal.type ? (React.createElement(EntityDropdown, { error: props.touched && props.error ? props.error : undefined, id: props.field.id, tabIndex: index, dataTestId: props.field.dataTestId, onChange: (value) => {
                            onChange(value);
                            props.setFieldValue(props.fieldName, value);
                        }, onBlur: () => {
                            props.setFieldTouched(props.fieldName, true);
                        }, isMultiSelect: props.field.fieldType ===
                            FormFieldSchemaType.MultiSelectDropdown, modelType: props.field.dropdownModal.type, labelField: props.field.dropdownModal.labelField, valueField: props.field.dropdownModal.valueField, options: props.field.dropdownOptions || [], placeholder: translatedPlaceholder || "", value: props.currentValues &&
                            props.currentValues[props.fieldName]
                            ? props.currentValues[props.fieldName]
                            : undefined })) : (React.createElement(Dropdown, { error: props.touched && props.error ? props.error : undefined, id: props.field.id, tabIndex: index, dataTestId: props.field.dataTestId, onChange: async (value) => {
                            onChange(value);
                            props.setFieldValue(props.fieldName, value);
                        }, onBlur: async () => {
                            props.setFieldTouched(props.fieldName, true);
                        }, isMultiSelect: props.field.fieldType ===
                            FormFieldSchemaType.MultiSelectDropdown, options: props.field.dropdownOptions || [], placeholder: translatedPlaceholder || "", value: props.currentValues &&
                            props.currentValues[props.fieldName]
                            ? props.currentValues[props.fieldName]
                            : "" }))),
                props.field.fieldType === FormFieldSchemaType.CardSelect && (React.createElement(CardSelect, { error: props.touched && props.error ? props.error : undefined, tabIndex: index, dataTestId: props.field.dataTestId, singleColumn: props.field.cardSelectSingleColumn, onChange: (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, options: props.field.cardSelectOptions || [], value: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "" })),
                props.field.fieldType === FormFieldSchemaType.ObjectID && (React.createElement(IDGenerator, { tabIndex: index, dataTestId: props.field.dataTestId, disabled: props.isDisabled || props.field.disabled, error: props.touched && props.error ? props.error : undefined, onChange: (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onEnterPress: () => {
                        var _a;
                        (_a = props.submitForm) === null || _a === void 0 ? void 0 : _a.call(props);
                    }, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : props.field.defaultValue || null })),
                props.field.fieldType === FormFieldSchemaType.Dictionary && (React.createElement(DictionaryForm, { keys: props.field.jsonKeysForDictionary, valueSuggestions: props.field.dictionaryValueSuggestions, onKeySelected: props.field.onDictionaryKeySelected, isLoadingKeys: props.field.isLoadingDictionaryKeys, loadingValueKeys: props.field.loadingDictionaryValueKeys, enableOperators: props.field.dictionaryEnableOperators, addButtonSuffix: props.field.title, keyPlaceholder: "Key", valuePlaceholder: "Value", valueTypes: [ValueType.Text, ValueType.Number, ValueType.Boolean], initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : props.field.defaultValue || {}, onChange: (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    } })),
                props.field.fieldType ===
                    FormFieldSchemaType.OptionChooserButton && (React.createElement(RadioButtons, { error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, options: props.field.radioButtonOptions || [], initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "" })),
                props.field.fieldType === FormFieldSchemaType.RadioButton && (React.createElement(Radio, { error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, options: ((_a = props.field.radioButtonOptions) === null || _a === void 0 ? void 0 : _a.map((option) => {
                        return {
                            label: option.title,
                            value: option.value,
                        };
                    })) || [], value: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "" })),
                props.field.fieldType === FormFieldSchemaType.LongText && (React.createElement(TextArea, { autoFocus: !props.disableAutofocus && index === 1, error: props.touched && props.error ? props.error : undefined, tabIndex: index, dataTestId: props.field.dataTestId, disableSpellCheck: props.field.disableSpellCheck, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "", placeholder: translatedPlaceholder || "" })),
                props.field.fieldType === FormFieldSchemaType.JSON && (React.createElement(CodeEditor, { error: props.touched && props.error ? props.error : undefined, type: CodeType.JSON, tabIndex: index, dataTestId: props.field.dataTestId, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "", value: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "", placeholder: translatedPlaceholder || "" })),
                props.field.fieldType === FormFieldSchemaType.Markdown && (React.createElement(MarkdownEditor, { error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, tabIndex: index, disableSpellCheck: props.field.disableSpellCheck, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "", placeholder: translatedPlaceholder || "" })),
                props.field.fieldType === FormFieldSchemaType.CustomComponent &&
                    props.field.getCustomElement &&
                    props.field.getCustomElement(props.currentValues, {
                        error: props.touched && props.error ? props.error : undefined,
                        tabIndex: index,
                        onChange: async (value) => {
                            onChange(value);
                            props.setFieldValue(props.fieldName, value);
                        },
                        onBlur: async () => {
                            props.setFieldTouched(props.fieldName, true);
                        },
                        initialValue: props.currentValues &&
                            props.currentValues[props.fieldName]
                            ? props.currentValues[props.fieldName]
                            : "",
                        placeholder: translatedPlaceholder || "",
                    }),
                (props.field.fieldType === FormFieldSchemaType.HTML ||
                    props.field.fieldType === FormFieldSchemaType.CSS ||
                    props.field.fieldType === FormFieldSchemaType.JavaScript) && (React.createElement(CodeEditor, { error: props.touched && props.error ? props.error : undefined, tabIndex: index, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, dataTestId: props.field.dataTestId, type: codeType, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : "", placeholder: translatedPlaceholder || "" })),
                isFileField && (React.createElement(FilePicker, { error: props.touched && props.error ? props.error : undefined, tabIndex: index, onChange: async (files) => {
                        const strippedFiles = files.map((i) => {
                            const strippedModel = new FileModel();
                            strippedModel._id = i._id;
                            if (i.name) {
                                strippedModel.name = i.name;
                            }
                            if (i.fileType) {
                                strippedModel.fileType = i.fileType;
                            }
                            return strippedModel;
                        });
                        let fileResult = strippedFiles;
                        if (!isMultiFileField) {
                            if (strippedFiles.length > 0) {
                                fileResult = strippedFiles[0];
                            }
                            else {
                                fileResult = null;
                            }
                        }
                        onChange(fileResult);
                        props.setFieldValue(props.fieldName, fileResult);
                    }, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, mimeTypes: props.field.fileTypes
                        ? props.field.fileTypes
                        : props.field.fieldType === FormFieldSchemaType.ImageFile
                            ? [MimeType.png, MimeType.jpeg, MimeType.jpg, MimeType.svg]
                            : [], isMultiFilePicker: isMultiFileField, dataTestId: props.field.dataTestId, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : isMultiFileField
                            ? []
                            : undefined, placeholder: translatedPlaceholder || "" })),
                props.field.fieldType === FormFieldSchemaType.Toggle && (React.createElement(Toggle, { error: props.touched && props.error ? props.error : undefined, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, dataTestId: props.field.dataTestId, value: booleanValue })),
                props.field.fieldType === FormFieldSchemaType.Checkbox && (React.createElement(CheckboxElement, { error: props.touched && props.error ? props.error : undefined, title: props.field.title || "", description: props.field.description || "", onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, dataTestId: props.field.dataTestId, onBlur: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, onFocus: async () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, initialValue: props.currentValues &&
                        (props.currentValues[props.fieldName] === true ||
                            props.currentValues[props.fieldName] === false)
                        ? props.currentValues[props.fieldName]
                        : props.field.defaultValue || false })),
                props.field.fieldType === FormFieldSchemaType.CategoryCheckbox && (React.createElement(CategoryCheckbox, { categories: ((_b = props.field.categoryCheckboxProps) === null || _b === void 0 ? void 0 : _b.categories) || [], options: ((_c = props.field.categoryCheckboxProps) === null || _c === void 0 ? void 0 : _c.options) || [], error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, onChange: async (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : [] })),
                (props.field.fieldType === FormFieldSchemaType.Name ||
                    props.field.fieldType === FormFieldSchemaType.Email ||
                    props.field.fieldType === FormFieldSchemaType.Hostname ||
                    props.field.fieldType === FormFieldSchemaType.URL ||
                    props.field.fieldType === FormFieldSchemaType.Route ||
                    props.field.fieldType === FormFieldSchemaType.Text ||
                    props.field.fieldType === FormFieldSchemaType.Number ||
                    props.field.fieldType === FormFieldSchemaType.Password ||
                    props.field.fieldType === FormFieldSchemaType.EncryptedText ||
                    props.field.fieldType === FormFieldSchemaType.Date ||
                    props.field.fieldType === FormFieldSchemaType.DateTime ||
                    props.field.fieldType === FormFieldSchemaType.Port ||
                    props.field.fieldType === FormFieldSchemaType.Phone ||
                    props.field.fieldType === FormFieldSchemaType.Domain ||
                    props.field.fieldType === FormFieldSchemaType.PositiveNumber) && (React.createElement(Input, { autoFocus: !props.disableAutofocus && index === 1, tabIndex: index, disabled: props.isDisabled || props.field.disabled, error: props.touched && props.error ? props.error : undefined, dataTestId: props.field.dataTestId, type: fieldType, autoComplete: props.field.fieldType
                        ? getAutoComplete(props.field.fieldType)
                        : undefined, onChange: (value) => {
                        onChange(value);
                        props.setFieldValue(props.fieldName, value);
                    }, onEnterPress: () => {
                        var _a;
                        (_a = props.submitForm) === null || _a === void 0 ? void 0 : _a.call(props);
                    }, onBlur: () => {
                        props.setFieldTouched(props.fieldName, true);
                    }, initialValue: props.currentValues &&
                        props.currentValues[props.fieldName]
                        ? props.currentValues[props.fieldName]
                        : props.field.defaultValue || "", placeholder: translatedPlaceholder || "" }))),
            showMultiSelectCheckboxCategoryModal &&
                getMultiSelectCheckboxCategoryModal(),
            props.field.showHorizontalRuleBelow && React.createElement(HorizontalRule, null)));
    };
    return React.createElement(React.Fragment, null, getFormField());
};
export default FormField;
//# sourceMappingURL=FormField.js.map