"use client";

import { useMemo } from "react";
import { DataTableColumn } from "mantine-datatable";
import { Center } from "@mantine/core";
import AttributeTableActions from "@/app/module-editor/[moduleId]/components/shared/AttributeTableActions/AttributeTableActions";
import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { AttributeSchema } from "@/lib/client";

const useAttributesTableColumns = () => {
    const isMobile = useIsMobile();
    const { attributeActions } = useModuleEditorContext();

    return useMemo(
        () =>
            [
                {
                    title: "Название",
                    accessor: "label",
                },
                {
                    title: "Тип",
                    accessor: "type.name",
                    render: attr =>
                        attr.type.type === "select"
                            ? `Выбор "${attr.select?.label}"`
                            : attr.type.name,
                },
                {
                    accessor: "actions",
                    title: <Center>Действия</Center>,
                    width: "0%",
                    render: attribute => (
                        <AttributeTableActions
                            attribute={attribute}
                            {...attributeActions}
                        />
                    ),
                },
            ] as DataTableColumn<AttributeSchema>[],
        [isMobile]
    );
};

export default useAttributesTableColumns;
