import { useMemo } from "react";
import { IconInfoCircle } from "@tabler/icons-react";
import { DataTableColumn } from "mantine-datatable";
import { em, Group, Text, Tooltip } from "@mantine/core";
import { BuiltInModuleSchemaOutput } from "@/lib/client";

const useModulesTableColumns = () => {
    return useMemo(
        () =>
            [
                {
                    accessor: "label",
                    title: "Название",
                    width: "20%",
                },
                {
                    title: "Описание",
                    accessor: "description",
                    width: "50%",
                },
                {
                    title: (
                        <Group gap={"sm"}>
                            Зависит от модулей
                            <Tooltip
                                label={
                                    "Зависимости автоматически подключатся при сохранении"
                                }>
                                <IconInfoCircle size={em(25)} />
                            </Tooltip>
                        </Group>
                    ),
                    accessor: "dependsOn",
                    width: "30%",
                    render: module => (
                        <Text>
                            {module.dependsOn?.map(m => m.label).join(", ")}
                        </Text>
                    ),
                },
            ] as DataTableColumn<BuiltInModuleSchemaOutput>[],
        []
    );
};

export default useModulesTableColumns;
