import { useMemo } from "react";
import { Box, Center, Text } from "@mantine/core";
import useAttributesTableColumns from "@/app/module-editor/[moduleId]/components/shared/AttributesTable/useAttributesTableColumns";
import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
import BaseTable from "@/components/ui/BaseTable/BaseTable";

const AttributesTable = () => {
    const { attributes, module } = useModuleEditorContext();
    const unusedAttributes = useMemo(() => {
        const usedAttrIds = new Set(module?.attributes.map(a => a.id));
        return attributes.filter(a => !usedAttrIds.has(a.id));
    }, [module, attributes]);

    const columns = useAttributesTableColumns();

    if (attributes.length === 0) {
        return (
            <Center my={"md"}>
                <Text>Нет атрибутов</Text>
            </Center>
        );
    }

    return (
        <Box
            h="100%"
            style={{ overflow: "auto" }}>
            <BaseTable
                withTableBorder
                columns={columns}
                records={unusedAttributes}
                verticalSpacing={"md"}
                groups={undefined}
                styles={{ table: { width: "100%" } }}
            />
        </Box>
    );
};

export default AttributesTable;
