import { useMemo } from "react";
import { MRT_ColumnDef } from "mantine-react-table";
import { AttributeSchema } from "../../../../../../../client";
import { Box, Center, Checkbox } from "@mantine/core";
import { IconCheck, IconX } from "@tabler/icons-react";
import { formatDate, formatDateTime } from "../../../../../../../types/utils.ts";


type Props = {
    selectedAttributes: Set<number>;
}

const useAttributesTableColumns = ({ selectedAttributes }: Props) => {
    return useMemo<MRT_ColumnDef<AttributeSchema>[]>(
        () => [
            {
                header: " ",
                Cell: ({ row }) => (
                    <Center>
                        <Checkbox
                            checked={selectedAttributes.has(row.original.id)}
                            onChange={() => {
                                if (selectedAttributes.has(row.original.id)) {
                                    selectedAttributes.delete(row.original.id);
                                } else {
                                    selectedAttributes.add(row.original.id);
                                }
                            }}
                        />
                    </Center>
                ),
                size: 5,
            },
            {
                header: "Название",
                accessorKey: "label",
                size: 150,
            },
            {
                header: "Тип",
                accessorKey: "type.name",
                size: 120,
            },
            // {
            //     header: "  ",
            //     Cell: ({ row }) => {
            //         const description = row.original.description ? `Описание: ${row.original.description}` : "";
            //         const info = (
            //             <Box>
            //                 <Text>Может быть пустым: {row.original.isNullable ? "да" : "нет"}</Text>
            //                 <Text>{defaultValueToStr(row.original.defaultValue, row.original.type.type)}</Text>
            //                 <Text>Синхронизировано в группе: {row.original.isApplicableToGroup ? "да" : "нет"}</Text>
            //                 <Text>{description}</Text>
            //             </Box>
            //         );
            //         return (
            //             <Tooltip label={info} multiline w={rem(300)}>
            //                 <IconInfoCircle />
            //             </Tooltip>
            //         );
            //     },
            //     size: 5,
            // },
            {
                header: "Значение по умолчанию",
                accessorKey: "defaultValue",
                Cell: ({ cell, row }) => {
                    const value = cell.getValue();
                    if (value === null) return <>-</>;

                    const type = row.original.type.type;
                    if (type === "datetime") {
                        return formatDateTime(value as string);
                    }
                    if (type === "date") {
                        return formatDate(value as string);
                    }
                    if (type === "bool") {
                        return value ? <IconCheck /> : <IconX />;
                    }

                    return <>{value}</>;
                },
                size: 150,
            },
            {
                header: "Синхронизировано в группе",
                accessorKey: "isApplicableToGroup",
                Cell: ({ cell }) => cell.getValue() ? (
                    <IconCheck />
                ) : (
                    <IconX />
                ),
                size: 120,
            },
            {
                header: "Может быть пустым",
                accessorKey: "isNullable",
                Cell: ({ cell }) => cell.getValue() ? (
                    <IconCheck />
                ) : (
                    <IconX />
                ),
                size: 120,
            },
            {
                header: "Описаниие",
                accessorKey: "description",
                Cell: ({ row }) => <Box>{row.original.description}</Box>,
                size: 250,
            },
        ],
        [selectedAttributes],
    );
};

export default useAttributesTableColumns;
