import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
import {BaseMarketplaceSchema} from "../../../client";
import {FC} from "react";
import useBaseMarketplacesList from "../../../hooks/useBaseMarketplacesList.tsx";
import {ActionIcon, Image} from "@mantine/core";

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

const BaseMarketplaceSelect: FC<Props> = (props) => {
    const {objects: baseMarketplaces} = useBaseMarketplacesList();
    return (
        <ObjectSelect
            renderOption={(baseMarketplace) =>
                <>
                    <ActionIcon radius={"md"} variant={"transparent"}>
                        <Image
                            src={baseMarketplaces.find(el => baseMarketplace.option.value === el.key)?.iconUrl || ""}/>
                    </ActionIcon>
                    {baseMarketplace.option.label}
                </>

            }
            getValueFn={(baseMarketplace) => baseMarketplace.key}
            getLabelFn={(baseMarketplace) => baseMarketplace.name}
            data={baseMarketplaces}
            {...props}
        />
    )
}
export default BaseMarketplaceSelect