"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 }) => {
    const [inputValue, setInputValue] = useState(""); // مدیریت مقدار تایپ‌شده
    const [options, setOptions] = useState([]);
    const [loading, setLoading] = useState(false);
    const requestServer = useRequest();

    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) => {
                    setOptions(response.data.data || []);
                })
                .catch(() => {
                    setOptions([]);
                })
                .finally(() => {
                    setLoading(false);
                });
        }, 500);
        debouncer(inputValue);
    };

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

    return (
        <Autocomplete
            multiple // قابلیت انتخاب چندگانه
            value={rahdarsCode} // آرایه موارد انتخاب‌شده
            size="small"
            onChange={(event, newValue) => {
                setRahdarsCode(newValue || []); // به‌روزرسانی موارد انتخاب‌شده
            }}
            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="کد راهداران"
                    fullWidth
                    error={!!error}
                    helperText={error?.message}
                    InputProps={{
                        ...params.InputProps,
                        endAdornment: (
                            <>
                                {loading ? <CircularProgress size="25px" color="inherit" /> : null}
                                {params.InputProps.endAdornment}
                            </>
                        ),
                    }}
                />
            )}
        />
    );
};

export default RahdarCode;