import { useMemo } from "react";
import { MRT_ColumnDef } from "mantine-react-table";
import { ServiceSchema } from "../../../../client";
import { List } from "@mantine/core";

export const useServicesTableColumns = () => {
    const getPriceRow = (service: ServiceSchema) => {
        if (service.priceRanges.length == 0) return <>{service.price}₽</>;
        return (
            <>
                <List>
                    {service.priceRanges.map(range => (
                        <List.Item key={range.id}>
                            {`${range.fromQuantity} - ${range.toQuantity}: ${range.price}₽`}
                        </List.Item>
                    ))}
                </List>
            </>
        );
    };

    return useMemo<MRT_ColumnDef<ServiceSchema>[]>(
        () => [
            {
                accessorKey: "category",
                header: "Категория",
                accessorFn: row => `${row.category.name}`,
                enableColumnOrdering: true,
                enableSorting: false,
            },
            {
                accessorKey: "name",
                header: "Услуга",
                enableGrouping: false,
                enableSorting: false,
                Cell: ({ row, cell }) => {
                    return row.original.isPlaceholder ? "" : (cell.renderValue<string>());
                },
            },
            {
                accessorKey: "price",
                header: "Цена",
                enableGrouping: false,
                enableSorting: false,
                Cell: ({ row }) => row.original.isPlaceholder ? "" : getPriceRow(row.original),
            },
            {
                accessorKey: "cost",
                header: "Себестоимость",
                enableGrouping: false,
                enableSorting: false,
                Cell: ({ row }) => row.original.isPlaceholder ? "" : `${row.original.cost}₽`,
            },

        ],
        [],
    );
};
