"use client";

import { FC, useState } from "react";
import { useModulesContext } from "@/app/modules/contexts/ModulesContext";
import useModulesTableColumns from "@/app/modules/hooks/useModulesTableColumns";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import useIsMobile from "@/hooks/utils/useIsMobile";
import InnerAttributesTable from "@/app/modules/components/InnerAttributesTable";

const ModulesTable: FC = () => {
    const isMobile = useIsMobile();
    const { modules } = useModulesContext();

    const [expandedModuleIds, setExpandedModuleIds] = useState<number[]>([]);

    const outerColumns = useModulesTableColumns({
        expandedModuleIds,
        setExpandedModuleIds,
    });

    return (
        <BaseTable
            columns={outerColumns}
            groups={undefined}
            records={modules}
            withTableBorder
            verticalSpacing={"md"}
            rowExpansion={{
                allowMultiple: true,
                expanded: {
                    recordIds: expandedModuleIds,
                    onRecordIdsChange: setExpandedModuleIds,
                },
                content: ({ record }) => (
                    <InnerAttributesTable
                        attributes={record.attributes}
                        moduleId={record.id}
                    />
                ),
            }}
            mx={isMobile ? "xs" : 0}
        />
    );
};

export default ModulesTable;
