"use client";
import { GET_RAHDARANS_LIST_SEARCH } from "@/core/utils/routes";
import useRequest from "@/lib/hooks/useRequest";
import { Autocomplete, CircularProgress, TextField } from "@mui/material";
import { useEffect, useState } from "react";

const RahdarNameOrCode = ({ title = "راهدار", rahdarsName, setRahdarsName, error, multiple = true }) => {
    const [inputValue, setInputValue] = useState(""); // مدیریت مقدار تایپ‌شده
    const [options, setOptions] = useState([]);
    const [loading, setLoading] = useState(false);
    const requestServer = useRequest();

    useEffect(() => {
        const fetchRahdarNames = (inputValue, controller) => {
            if ((inputValue || "").length < 3) {
                setOptions([]);
                return;
            }
            setLoading(true);
            requestServer(`${GET_RAHDARANS_LIST_SEARCH}?search=${inputValue}`, "get", {
                requestOptions: { signal: controller.signal },
            })
                .then((response) => {
                    const combinedArray = rahdarsName
                        ? [...rahdarsName, ...response.data.data]
                        : [...response.data.data];
                    const uniqueArray = Array.from(new Map(combinedArray.map((item) => [item.id, item])).values());
                    setOptions(uniqueArray || []);
                })
                .catch(() => {
                    setOptions([]);
                })
                .finally(() => {
                    setLoading(false);
                });
        };

        const controller = new AbortController();
        fetchRahdarNames(inputValue, controller);
        return () => controller.abort();
    }, [inputValue]);

    return (
        <Autocomplete
            multiple={multiple} // قابلیت انتخاب چندگانه داینامیک
            value={rahdarsName} // آرایه موارد انتخاب‌شده
            size="small"
            onChange={(event, newValue) => {
                setRahdarsName(multiple ? newValue || [] : newValue || null); // مدیریت حالت چندگانه و تک‌گانه
            }}
            inputValue={inputValue} // مقدار تایپ‌شده
            onInputChange={(event, newInputValue) => {
                setInputValue(newInputValue || ""); // به‌روزرسانی مقدار تایپ‌شده
            }}
            options={options} // گزینه‌های موجود
            getOptionLabel={(option) => (typeof option === "string" ? option : `${option.name}`)}
            isOptionEqualToValue={(option, value) => {
                if (!value) return false;
                if (value === "") return option.code === "";
                return option.code === (value?.code || value);
            }}
            loading={loading}
            loadingText={`درحال جستجوی ${title}`}
            noOptionsText={(inputValue || "").length < 3 ? `حداقل سه کاراکتر وارد کنید` : `${title}ی یافت نشد`}
            fullWidth
            renderInput={(params) => (
                <TextField
                    {...params}
                    label={multiple ? `${title}ان` : `${title}`}
                    fullWidth
                    placeholder={
                        multiple ? `نام یا کدملی ${title}ان را وارد کنید` : `نام یا کدملی ${title} را وارد کنید`
                    }
                    error={!!error}
                    helperText={error?.message}
                    InputLabelProps={{
                        shrink: true,
                    }}
                    InputProps={{
                        ...params.InputProps,
                        endAdornment: (
                            <>
                                {loading ? <CircularProgress size="25px" color="inherit" /> : null}
                                {params.InputProps.endAdornment}
                            </>
                        ),
                    }}
                />
            )}
        />
    );
};
export default RahdarNameOrCode;