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,
        },
        {
            accessorKey: "name",
            header: "Название",
            enableSorting: false,
        },
        {
            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>
                )
            }
        }
    ], []);

}