import { useMemo } from "react";
import { MRT_ColumnDef } from "mantine-react-table";
import { ProductSchema } from "../../../../client";
import { List, Spoiler, useMantineTheme } from "@mantine/core";

export const useProductsTableColumns = () => {
    const theme = useMantineTheme();
    return useMemo<MRT_ColumnDef<ProductSchema>[]>(
        () => [
            {
                accessorKey: "article",
                header: "Артикул",
                enableSorting: false,
                size: 100,
            },
            {
                accessorKey: "factoryArticle",
                header: "Складской артикул",
                enableSorting: false,
                size: 100,
            },
            {
                accessorKey: "name",
                header: "Название",
                enableSorting: false,
                size: 150,
            },
            {
                accessorKey: "barcodes",
                header: "Штрихкоды",
                Cell: ({ cell }) => {
                    return (
                        <List size={"sm"}>
                            <Spoiler
                                maxHeight={
                                    parseFloat(theme.lineHeights.sm) * 25
                                }
                                showLabel={"Показать все"}
                                hideLabel={"Скрыть"}>
                                {cell.getValue<string[]>().map(barcode => (
                                    <List.Item key={barcode}>
                                        {barcode}
                                    </List.Item>
                                ))}
                            </Spoiler>
                        </List>
                    );
                },
                enableSorting: false,
                size: 50,
            },
            {
                accessorKey: "barcodeTemplate.name",
                header: "Шаблон штрихкода",
                enableSorting: false,
                size: 50,
            },
            {
                accessorKey: "brand",
                header: "Бренд",
                enableSorting: false,
                size: 50,
            },
            {
                accessorKey: "composition",
                header: "Состав",
                enableSorting: false,
                size: 50,
            },
            {
                accessorKey: "color",
                header: "Цвет",
                enableSorting: false,
                size: 50,
            },
            {
                accessorKey: "size",
                header: "Размер",
                enableSorting: false,
                size: 50,
            },
            {
                accessorKey: "additionalInfo",
                header: "Доп. информация",
                enableSorting: false,
                size: 120,
            },
        ],
        []
    );
};
