import { FC } from "react";
import {
    ActionIcon,
    ComboboxItem,
    ComboboxLikeRenderOptionInput,
    Image,
} from "@mantine/core";
import useBaseMarketplacesList from "@/app/clients/hooks/lists/useBaseMarketplacesList";
import ObjectSelect, {
    ObjectSelectProps,
} from "@/components/selects/ObjectSelect/ObjectSelect";
import { BaseMarketplaceSchema } from "@/lib/client";

type Props = Omit<
    ObjectSelectProps<BaseMarketplaceSchema>,
    "data" | "getValueFn" | "getLabelFn"
>;

const BaseMarketplaceSelect: FC<Props> = props => {
    const { baseMarketplaces } = useBaseMarketplacesList();

    const renderOption = (
        baseMarketplace: ComboboxLikeRenderOptionInput<ComboboxItem>
    ) => (
        <>
            <ActionIcon
                radius={"md"}
                variant={"transparent"}>
                <Image
                    src={
                        baseMarketplaces.find(
                            el =>
                                baseMarketplace.option.value ===
                                el.id.toString()
                        )?.iconUrl || ""
                    }
                />
            </ActionIcon>
            {baseMarketplace.option.label}
        </>
    );

    return (
        <ObjectSelect
            renderOption={renderOption}
            getValueFn={baseMarketplace => baseMarketplace.id.toString()}
            getLabelFn={baseMarketplace => baseMarketplace.name}
            data={baseMarketplaces}
            {...props}
        />
    );
};
export default BaseMarketplaceSelect;
