import React, { Fragment } from 'react';
import parse from 'html-react-parser';
import {FormHelper} from "../../../../models/JsonForms";
import UnitHelper from "../../Forms/FormHelpers/UnitHelper";
import BuildingHelper from "../../Forms/FormHelpers/BuildingHelper";

interface DynamicFormFieldProps {
    field: any;
    sec: any;
    mode: string;
    formData: any;
    formErrors: any;
    iterable_count: number;
    sum_prefixes?: any;
    dispatch: React.Dispatch<any>;
    CustomLabel: React.ComponentType<any>;
    CustomIconTooltip: React.ComponentType<any>;
    FormTextField: React.ComponentType<any>;
    FormDatePicker: React.ComponentType<any>;
    FormTimePickerField: React.ComponentType<any>;
    CustomCheckbox: React.ComponentType<any>;
    FormSelectField: React.ComponentType<any>;
    CustomRadioButton: React.ComponentType<any>;
    SelectItem: React.ComponentType<any>;
    CustomTextArea: React.ComponentType<any>;
    CustomFileUpload: React.ComponentType<any>;
    CustomTextBox: React.ComponentType<any>;
}

export function DynamicFormField({
                                     field,
                                     sec,
                                     mode,
                                     formData,
                                     formErrors,
                                     iterable_count,
                                     sum_prefixes,
                                     dispatch,
                                     CustomLabel,
                                     CustomIconTooltip,
                                     FormTextField,
                                     FormDatePicker,
                                     FormTimePickerField,
                                     CustomCheckbox,
                                     FormSelectField,
                                     CustomRadioButton,
                                     SelectItem,
                                     CustomTextArea,
                                     CustomFileUpload,
                                     CustomTextBox,
                                 }: DynamicFormFieldProps) {
    // Show field only if no dependency or dependency satisfied
    if (
        field.depends_on?.field &&
        !field.depends_on.values.includes(formData[field.depends_on.field]?.toString())
    ) {
        return null;
    }

    const HelpersMap: Record<FormHelper, JSX.Element> = {
        "unit": <UnitHelper/>,
        "buildings": <BuildingHelper/>
    }

    return (
        <Fragment>
            <div className={`col-${field.col ?? 6}`}>
                {field.type !== 'textbox' && (
                    <CustomLabel htmlFor={field.name} req={field.required}>
                        {field.label}
                        {field.tooltip && (
                            <CustomIconTooltip>{parse(field.tooltip)}</CustomIconTooltip>
                        )}
                    </CustomLabel>
                )}

                {field.type === 'text' && (
                    <FormTextField
                        field={field}
                        sec={sec}
                        mode={mode}
                        formData={formData}
                        formErrors={formErrors}
                        iterable_count={iterable_count}
                        sum_prefixes={sum_prefixes}
                        dispatch={dispatch}
                    />
                )}

                {field.type === 'date' && (
                    <FormDatePicker
                        field={field}
                        sec={sec}
                        mode={mode}
                        formData={formData}
                        formErrors={formErrors}
                        iterable_count={iterable_count}
                        dispatch={dispatch}
                    />
                )}

                {field.type === 'time' && (
                    <FormTimePickerField
                        field={field}
                        mode={mode}
                        formData={formData}
                        formErrors={formErrors}
                        dispatch={dispatch}
                    />
                )}

                {field.type === 'checkbox' && (
                    <CustomCheckbox
                        required={(field?.readonly || mode === 'view') ?? false}
                        checked={formData[field.name]}
                        hasError={formErrors[field.name] ?? ''}
                        onChange={(e: any) => {
                            if (field?.readonly || mode === 'view') {
                                console.log("u cant change a readonly field");
                            } else {
                                dispatch({ type: 'simple', value: e, key: field.name });
                            }
                        }}
                    />
                )}

                {field.type === 'select' && (
                    <FormSelectField
                        field={field}
                        sec={sec}
                        mode={mode}
                        formData={formData}
                        formErrors={formErrors}
                        iterable_count={iterable_count}
                        dispatch={dispatch}
                    />
                )}

                {field.type === 'radio' && (
                    <CustomRadioButton
                        hasError={formErrors[field.name] ?? ''}
                        disabled={field?.readonly || mode === 'view'}
                        theme={'user-form-field'}
                        value={formData[field.name]}
                        handleChange={(e: any) => {
                            if (field?.readonly || mode === 'view') {
                                console.log("u cant change a readonly field");
                            } else {
                                dispatch({ type: 'simple', value: e, key: field.name });
                            }
                        }}
                    >
                        {field.options.map((op: any) => (
                            <SelectItem key={op.value} value={op.value}>
                                <span>{op.name}</span>
                            </SelectItem>
                        ))}
                    </CustomRadioButton>
                )}

                {field.type === 'textarea' && (
                    <CustomTextArea
                        readOnly={field?.readonly || mode === 'view'}
                        theme={'user-form-field'}
                        value={formData[field.name]}
                        placeholder="Παρακαλώ συμπληρώστε"
                        onChange={(e: any) => {
                            if (field?.readonly || mode === 'view') {
                                console.log("u cant change a readonly field");
                            } else {
                                dispatch({ type: 'simple', value: e, key: field.name });
                            }
                        }}
                    />
                )}

                {field.type === 'file' && (
                    <CustomFileUpload
                        file={sec.is_iterable ? formData[field.name][iterable_count] : formData[field.name]}
                        onChange={(file: any) => {
                            const action = sec.is_iterable
                                ? { type: 'iterable' as const, value: file, key: field.name, iterable_count }
                                : { type: 'simple' as const, value: file, key: field.name };
                            dispatch(action);
                        }}
                    />
                )}

                {field.type === 'textbox' && <CustomTextBox>{field.custom_text}</CustomTextBox>}
            </div>

            {field.helper && (field.helper in HelpersMap) && (
                <div className="col-6">
                    {HelpersMap[field.helper as FormHelper]}
                </div>
            )}
        </Fragment>
    );
}