import MemberController from "@/actions/App/Http/Controllers/MemberController";
import useReactSelectTheme from "@/hooks/use-react-select";
import { Member } from "@/types/member";
import axios from "axios";
import { useEffect, useState } from "react";
import AsyncSelect from "react-select/async";

type OptionType = {
    value: number;
    label: string;
    [key: string]: any;
};

interface Props {
    value?: number;
    onChange: (option: OptionType | null) => void;
    id?: string;
    userId?: number;
    placeholder?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
}

export default function SelectMember({ value, onChange, id = "id_member", userId, placeholder = 'Pilih Member', isClearable = false, isDisabled = false, }: Props) {
    const reactSelectTheme = useReactSelectTheme();
    const [defaultValue, setDefaultValue] = useState<OptionType | null>(null);

    const loadOptions = async (inputValue: string): Promise<OptionType[]> => {
        const { data: res } = await axios.get(MemberController.index.url(), {
            params: {
                search: inputValue,
                ...(userId && { user_id: userId }),
                json: true,
            }
        });

        return res?.data?.map((item: Member) => ({
            value: item.id_member,
            label: `${item.id_member} | ${item.nama_perusahaan}`,
            ...item,
        }));
    }

    useEffect(() => {
        const findData = async () => {
            const { data: item } = await axios.get(MemberController.show.url(value!), {
                params: {
                    json: true,
                },
            });

            setDefaultValue({
                value: item.id_member,
                label: `${item.id_member} | ${item.nama_perusahaan}`,
                ...item,
            });
        }

        if (!!value) {
            findData();
        } else {
            setDefaultValue(null);
        }
    }, [value]);

    return (
        <AsyncSelect
            key={`user-${userId}`}
            inputId={id}
            cacheOptions
            defaultOptions
            loadOptions={loadOptions}
            value={defaultValue}
            onChange={(val) => onChange(!val ? null : val as OptionType)}
            styles={reactSelectTheme}
            placeholder={placeholder}
            isClearable={isClearable}
            isDisabled={isDisabled}
        />
    )
}