"use client";

import { useMemo } from "react";
import { IconCheck, IconX } from "@tabler/icons-react";
import { DataTableColumn } from "mantine-datatable";
import { Box } from "@mantine/core";
import AttributeDefaultValue from "@/components/ui/AttributeDefaultValue/AttributeDefaultValue";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { ModuleAttributeSchema } from "@/lib/client";

const useAttributesInnerTableColumns = () => {
    const isMobile = useIsMobile();

    const renderCheck = (value: boolean) => (value ? <IconCheck /> : <IconX />);

    return useMemo(
        () =>
            [
                {
                    title: "Название атрибута",
                    accessor: "label",
                },
                {
                    title: "Тип",
                    accessor: "type.name",
                    render: attr =>
                        attr.type.type === "select"
                            ? `Выбор "${attr.label}"`
                            : attr.type.name,
                },
                {
                    title: "Значение по умолчанию",
                    accessor: "defaultValue",
                    render: attr => <AttributeDefaultValue attribute={attr} />,
                },
                {
                    title: "Синхронизировано в группе",
                    accessor: "isApplicableToGroup",
                    render: attr => renderCheck(attr.isApplicableToGroup),
                },
                {
                    title: "Может быть пустым",
                    accessor: "isNullable",
                    render: attr => renderCheck(attr.isNullable),
                },
                {
                    title: "Описаниие",
                    accessor: "description",
                    render: attr => <Box>{attr.description}</Box>,
                },
            ] as DataTableColumn<ModuleAttributeSchema>[],
        [isMobile]
    );
};

export default useAttributesInnerTableColumns;