import { ProductSchema } from "../../../../../client";
import { FC, useState } from "react";
import ObjectSelect, { ObjectSelectProps } from "../../../../../components/ObjectSelect/ObjectSelect.tsx";
import getRenderOptions from "../../../../../components/ProductSelect/utils/getRenderOptions.tsx";


type Props = Omit<ObjectSelectProps<ProductSchema>, "searchValue" | "onSearchChange">;

const ShippingProductSelect: FC<Props> = (props: Props) => {
    const [search, setSearch] = useState("");

    const getFilteredData = () => {
        const searchValue: string = search.toLowerCase();

        const data: ProductSchema[] = props.data.filter(product => {
            return (
                product.name.toLowerCase().includes(searchValue) ||
                product.article?.toLowerCase().includes(searchValue) ||
                product.barcodes && product.barcodes[0].toLowerCase().includes(searchValue)
            );
        });
        return data;
    };

    return (
        <ObjectSelect
            label={"Товар"}
            placeholder={"Выберите товар"}
            searchable
            {...props}
            data={getFilteredData()}
            searchValue={search}
            onSearchChange={setSearch}
            renderOption={getRenderOptions(props.data)}
            filter={({ options }) => options}
        />
    );
};

export default ShippingProductSelect;
