import MakeCustomSelect from "../../Forms/CustomSelect/MakeCustomSelect";
import MakeCustomSelectFromEndpoint from "../../Forms/CustomSelect/MakeCustomSelectFromEndpoint";
import { useEffect } from "react";

interface OptionApi {
    model: string;
    param: {
        name: string | null;
        value: any;
    };
}

interface Field {
    name: string;
    type: string;
    readonly?: boolean;
    required?: boolean;
    searchable?: boolean;
    options?: {
        source: "model" | "custom";
        model?: string;
        param?: string;
        custom?: any[];
        endpoint?: string; // still allowed
    };
}

interface Section {
    is_iterable: boolean;
}

interface DynamicSelectFieldProps {
    field: Field;
    sec: Section;
    mode: string;
    formData: Record<string, any>;
    formErrors: Record<string, string>;
    iterable_count?: number;
    dispatch: React.Dispatch<any>;
}

const DynamicSelectField: React.FC<DynamicSelectFieldProps> = ({
                                                                   field,
                                                                   sec,
                                                                   mode,
                                                                   formData,
                                                                   formErrors,
                                                                   iterable_count = 0,
                                                                   dispatch,
                                                               }) => {
    const isReadOnly = field?.readonly || mode === "view";
    const value = sec.is_iterable
        ? formData[field.name]?.[iterable_count]
        : formData[field.name];
    const hasError = formErrors[field.name] ?? "";
    const clearable = !field.required;
    const placeholder = "παρακαλώ επιλέξτε";

    const handleChange = (e: any) => {
        if (isReadOnly) {
            console.log("u cant change a readonly field");
            return;
        }

        if (sec.is_iterable) {
            dispatch({
                type: "iterable",
                value: e,
                key: field.name,
                iterable_count,
            });
        } else {
            dispatch({
                type: "simple",
                value: e,
                key: field.name,
            });
        }
    };

    const handleUnmount = () => {
        if (sec.is_iterable) {
            dispatch({
                type: "iterable",
                value: null,
                key: field.name,
                iterable_count,
            });
        } else {
            dispatch({
                type: "simple",
                value: null,
                key: field.name,
            });
        }
    };

    const handleMount = () => {
        dispatch({
            type: "simple",
            value: formData[field.name] || 0,
            key: field.name,
        });
    };

    // Always call useEffect unconditionally
    useEffect(() => {
        if (field.options?.source === "custom") {
            // Do something if needed
        }
    }, [field.options?.source]);

    if (field.type !== "select" || !field.options) return null;

    if (field.options.source === "model") {
        const optionsApi: OptionApi = {
            model: field.options.model as string,
            param: {
                name: field.options.param ?? null,
                value: field.options.param
                    ? formData[field.options.param]
                    : null,
            },
        };

        return (
            <MakeCustomSelectFromEndpoint
                key={field.name}
                hasError={hasError}
                disabled={isReadOnly}
                placeholder={placeholder}
                theme="user-form-select"
                value={value}
                handleChange={handleChange}
                onUnmount={handleUnmount}
                optionsApi={optionsApi}
                searchable={field.searchable}
                minSearch={0}
                clearable={clearable}
            />
        );
    }

    if (field.options.source === "custom") {
        return (
            <MakeCustomSelect
                hasError={hasError}
                disabled={isReadOnly}
                placeholder={placeholder}
                theme="user-form-select"
                value={value}
                handleChange={handleChange}
                onMount={handleMount}
                onUnmount={handleUnmount}
                options={field.options.custom ?? []}
                searchable={field.searchable}
                minSearch={0}
                clearable={clearable}
            />
        );
    }

    return null;
};

export default DynamicSelectField;