import React, { ReactNode } from "react";
import { Flex } from "@mantine/core";
import ModuleAttribute from "@/app/module-editor/[moduleId]/components/shared/ModuleAttribute/ModuleAttribute";
import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
import FormFlexRow from "@/components/ui/FormFlexRow/FormFlexRow";

const ModuleAttributesEditor = () => {
    const { module } = useModuleEditorContext();

    const getAttributesRows = () => {
        if (!module?.attributes) return [];

        const rows: ReactNode[] = [];
        for (let i = 0; i < module.attributes.length; i += 2) {
            const rightIdx = i + 1;

            rows.push(
                <FormFlexRow key={i}>
                    <ModuleAttribute attribute={module.attributes[i]} />
                    {rightIdx < module.attributes.length && (
                        <ModuleAttribute
                            attribute={module.attributes[rightIdx]}
                        />
                    )}
                </FormFlexRow>
            );
        }

        return rows;
    };

    return (
        <Flex
            gap={"xs"}
            direction={"column"}>
            {getAttributesRows()}
        </Flex>
    );
};

export default ModuleAttributesEditor;
