import { ProdukDeposito, ReactSelectProps } from '@/types';
import { useProdukDeposito } from '@/useQuery/query';
import { Select } from './Select';

export const SelectProdukDeposito = (props: ReactSelectProps) => {
    const produk = useProdukDeposito();

    const option_produk = produk.data
        ?.filter((item: ProdukDeposito) => item.status == 1)
        .map((item: ProdukDeposito) => ({
            label: `${item.id} : ${item.nama}`,
            value: item.id,
        }));

    return (
        <Select
            {...props}
            value={option_produk?.find((item: { label: string; value: string }) => item.value == props.value) ?? ''}
            placeholder="Pilih Produk Deposito"
            isDisabled={props.disable}
            menuPlacement={props.menuPlacement}
            options={option_produk}
            onChange={(newValue: unknown) => {
                const option = newValue as { label: string; value: string };
                props.onChange?.(option?.value);
            }}
        />
    );
};