import { useMemo } from "react";
import { IconBarcode, IconEdit, IconTrash } from "@tabler/icons-react";
import { DataTableColumn } from "mantine-datatable";
import { Center, Flex, List, Spoiler, useMantineTheme } from "@mantine/core";
import ActionIconWithTip from "@/components/ui/ActionIconWithTip/ActionIconWithTip";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { ProductSchema } from "@/lib/client";

type Props = {
    onPrintBarcode: (product: ProductSchema) => void;
    onChange: (product: ProductSchema) => void;
    onDelete: (product: ProductSchema) => void;
};

export const useProductsTableColumns = ({
    onChange,
    onDelete,
    onPrintBarcode,
}: Props) => {
    const theme = useMantineTheme();
    const isMobile = useIsMobile();

    return useMemo(
        () =>
            [
                {
                    accessor: "actions",
                    title: <Center>Действия</Center>,
                    width: "0%",
                    render: product => (
                        <Flex gap={isMobile ? "sm" : "md"}>
                            <ActionIconWithTip
                                tipLabel={"Печать штрихкода"}
                                onClick={() => onPrintBarcode(product)}>
                                <IconBarcode />
                            </ActionIconWithTip>
                            <ActionIconWithTip
                                tipLabel={"Редактировать"}
                                onClick={() => onChange(product)}>
                                <IconEdit />
                            </ActionIconWithTip>
                            <ActionIconWithTip
                                tipLabel={"Удалить"}
                                onClick={() => onDelete(product)}>
                                <IconTrash />
                            </ActionIconWithTip>
                        </Flex>
                    ),
                },
                {
                    accessor: "article",
                    title: "Артикул",
                },
                {
                    accessor: "factoryArticle",
                    title: "Складской артикул",
                },
                {
                    accessor: "name",
                    title: "Название",
                },
                {
                    accessor: "barcodes",
                    title: "Штрихкоды",
                    render: product => {
                        return (
                            <List size={"sm"}>
                                <Spoiler
                                    maxHeight={
                                        parseFloat(theme.lineHeights.sm) * 30
                                    }
                                    showLabel={"Показать все"}
                                    hideLabel={"Скрыть"}>
                                    {product.barcodes?.map(barcode => (
                                        <List.Item key={barcode}>
                                            {barcode}
                                        </List.Item>
                                    ))}
                                </Spoiler>
                            </List>
                        );
                    },
                },
                {
                    accessor: "barcodeTemplate.name",
                    title: "Шаблон ШК",
                },
                {
                    accessor: "brand",
                    title: "Бренд",
                },
                {
                    accessor: "composition",
                    title: "Состав",
                },
                {
                    accessor: "color",
                    title: "Цвет",
                },
                {
                    accessor: "size",
                    title: "Размер",
                },
                {
                    accessor: "additionalInfo",
                    title: "Доп. информация",
                },
            ] as DataTableColumn<ProductSchema>[],
        []
    );
};
