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

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

    useEffect(() => {
        const fetchRahdarCodes = (inputValue, controller) => {
            const debouncer = debounce((query) => {
                if ((query || "").length < 3) {
                    setOptions([]);
                    return;
                }
                setLoading(true);
                requestServer(`${GET_RAHDARANS_LIST_SEARCH}?code=${query}`, "get", {
                    requestOptions: { signal: controller.signal },
                })
                    .then((response) => {
                        const combinedArray = rahdarsCode
                            ? [...rahdarsCode, ...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);
                    });
            }, 500);
            debouncer(inputValue);
        };

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

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