import { jsx as _jsx } from "react/jsx-runtime";
import { AsyncSelectField, CheckboxField, CheckboxGroupField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from "../../basic";
import FormColorField from "./FormColorField";
import { getFieldFlexStyle, groupFieldsIntoRows } from "./groupFieldsIntoRows";
import "./style.scss";
const convertList = (values, labelAttr, valueAttr) => {
    if (!values)
        return [];
    let fields = [];
    values.map((value) => {
        fields = [...fields, { label: value[labelAttr], value: value[valueAttr] }];
    });
    return fields;
};
export default function AppForm({ fields, form, prefix, onChangeFunctions = {}, onBlurFunctions = {}, runtimeOptions = {}, runtimeLoadOptions = {}, }) {
    const getOnChangeFn = (attr) => onChangeFunctions[attr];
    const getOnBlurFn = (attr) => onBlurFunctions[attr];
    const getOptions = (attr) => {
        if (!runtimeOptions[attr])
            return undefined;
        return convertList(runtimeOptions[attr], "name", "uid");
    };
    const renderField = (field) => {
        const name = prefix ? `${prefix}.${field.attr}` : field.attr;
        const handleChange = getOnChangeFn(field.attr);
        if (field.type === "autocomplete") {
            const loadOptions = runtimeLoadOptions[field.attr];
            if (!loadOptions)
                return null;
            return (_jsx(AsyncSelectField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, multiple: field.multiple, freeSolo: field.freeSolo, minQueryLength: field.minQueryLength, loadOptions: loadOptions, placeholder: field.title, noOptionsText: field.translation, onChange: (_attr, value) => handleChange?.(value) }, name));
        }
        if (field.type === "select") {
            const selectOptions = getOptions(field.attr) || field.options || [];
            const selectProps = {
                attr: name,
                label: field.name,
                createdForm: form,
                options: selectOptions,
                disabled: field.disabled,
                required: field.required,
                onChange: (value) => handleChange?.(value),
                showEndAdornment: false,
            };
            if (field.multiple) {
                return _jsx(SelectMultipleField, { ...selectProps }, name);
            }
            return (_jsx(SelectField, { ...selectProps, allowEmpty: field.allowEmpty }, name));
        }
        if (field.type === "check") {
            if (field.multiple) {
                const checkOptions = getOptions(field.attr) || field.options || [];
                return (_jsx(CheckboxGroupField, { attr: name, createdForm: form, options: checkOptions, disabled: field.disabled, onChange: (_attr, value) => handleChange?.(value) }, name));
            }
            return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
        }
        if (field.type === "switch") {
            return (_jsx(SwitchField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, onChange: (value) => handleChange?.(value) }, name));
        }
        if (field.type === "datepicker") {
            const handleBlur = getOnBlurFn(field.attr);
            return (_jsx(DatePickerField, { attr: name, label: field.size === "small" ? undefined : field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (_attr, value) => handleChange?.(value), onBlur: handleBlur, height: field.size === "small" ? "32px" : undefined }, name));
        }
        if (field.type === "textarea") {
            return (_jsx(TextField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), multiline: true, rows: field.rows, infoText: field.infoText, defaultEndAdornments: field.infoText ? ["info"] : ["close"] }, name));
        }
        if (field.type === "color") {
            return (_jsx(FormColorField, { attr: name, label: field.name, form: form, disabled: field.disabled, tooltipText: field.tooltipText, onChange: (value) => handleChange?.(value) }, name));
        }
        const handleBlur = getOnBlurFn(field.attr);
        return (_jsx(TextField, { attr: name, label: field.size === "small" ? undefined : field.name, placeholder: field.size === "small" ? field.name : undefined, createdForm: form, mask: field.mask, blurMask: field.blurMask, disabled: field.disabled, required: field.required, onChange: (value) => handleChange?.(value), height: field.size === "small" ? "32px" : undefined, onBlur: handleBlur, infoText: field.infoText, defaultEndAdornments: field.infoText ? ["info"] : ["close"] }, name));
    };
    return (_jsx("div", { className: "app-form-container", children: groupFieldsIntoRows(fields).map((row, rowIdx) => (_jsx("div", { className: "app-form-row", children: row.map((field) => (_jsx("div", { className: "app-form-field", style: getFieldFlexStyle(field), children: renderField(field) }, field.attr))) }, rowIdx))) }));
}
