"use client";

import { useMemo } from "react";
import { IconCheck, IconX } from "@tabler/icons-react";
import { DataTableColumn } from "mantine-datatable";
import { Box, Center } from "@mantine/core";
import AttributeTableActions from "@/app/module-editor/[moduleId]/components/shared/AttributeTableActions/AttributeTableActions";
import AttributeDefaultValue from "@/components/ui/AttributeDefaultValue/AttributeDefaultValue";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { AttributeSchema } from "@/lib/client";
import { useAttributesContext } from "../contexts/AttributesContext";

const useAttributesTableColumns = () => {
    const isMobile = useIsMobile();
    const { attributesActions } = useAttributesContext();
    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: isMobile
                        ? "Синх. в группе"
                        : "Синхронизировано в группе",
                    accessor: "isApplicableToGroup",
                    render: attr => renderCheck(attr.isApplicableToGroup),
                },
                {
                    title: "Может быть пустым",
                    accessor: "isNullable",
                    render: attr => renderCheck(attr.isNullable),
                },
                {
                    title: "Описаниие",
                    accessor: "description",
                    render: attr => <Box>{attr.description}</Box>,
                },
                {
                    accessor: "actions",
                    title: <Center>Действия</Center>,
                    width: "0%",
                    render: attribute => (
                        <AttributeTableActions
                            attribute={attribute}
                            onUpdate={attributesActions.onUpdate}
                            onDelete={attributesActions.onDelete}
                        />
                    ),
                },
            ] as DataTableColumn<AttributeSchema>[],
        [isMobile]
    );
};

export default useAttributesTableColumns;
