import {
    ComboboxItem,
    ComboboxLikeRenderOptionInput,
    SelectProps,
    Tooltip,
} from "@mantine/core";
import { ProductSchema } from "@/lib/client";
import ProductFieldsList from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/ProductView/components/ProductFieldsList";

const renderProductOption = (
    products: ProductSchema[]
): SelectProps["renderOption"] => {
    return (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
        const product = products.find(
            product => product.id === Number(item.option.value)
        );
        if (!product) return item.option.label;
        // const imageUrl =
        //     product.images && product.images[0]
        //         ? product.images[0].imageUrl
        //         : undefined;

        return (
            <Tooltip
                style={{ whiteSpace: "pre-line" }}
                multiline
                label={
                    <>
                        <ProductFieldsList product={product} />
                        {/*{imageUrl && (*/}
                        {/*    <Image*/}
                        {/*        src={imageUrl}*/}
                        {/*        alt={product.name}*/}
                        {/*        maw={rem(250)}*/}
                        {/*    />*/}
                        {/*)}*/}
                    </>
                }>
                <div>
                    {product.name}
                    <br />
                    {/*{product.barcodes && (*/}
                    {/*    <Text size={"xs"}>{product.barcodes[0]}</Text>*/}
                    {/*)}*/}
                </div>
            </Tooltip>
        );
    };
};

export default renderProductOption;
