import { useMemo } from "react";
import { DataTableColumn } from "mantine-datatable";
import { ActionIcon, Center, Flex, Image } from "@mantine/core";
import UpdateDeleteTableActions from "@/components/ui/BaseTable/components/UpdateDeleteTableActions";
import { MarketplaceSchema } from "@/lib/client";

type Props = {
    onDelete: (mp: MarketplaceSchema) => void;
    onChange: (mp: MarketplaceSchema) => void;
};

export const useMarketplacesTableColumns = ({ onDelete, onChange }: Props) => {
    return useMemo(
        () =>
            [
                {
                    accessor: "actions",
                    title: <Center>Действия</Center>,
                    width: "0%",
                    render: mp => (
                        <UpdateDeleteTableActions
                            onDelete={() => onDelete(mp)}
                            onChange={() => onChange(mp)}
                        />
                    ),
                },
                {
                    title: "Маркетплейс",
                    accessor: "baseMarketplace",
                    cellsStyle: () => ({}),
                    render: mp => (
                        <Flex key={`${mp.id}mp`}>
                            <ActionIcon variant={"transparent"}>
                                <Image
                                    src={mp.baseMarketplace?.iconUrl || ""}
                                />
                            </ActionIcon>
                        </Flex>
                    ),
                },
                {
                    accessor: "name",
                    title: "Название",
                },
            ] as DataTableColumn<MarketplaceSchema>[],
        []
    );
};