import { useEffect } from 'react'
import AisleCreator from './aisleCreator/aisleCreator'
import AisleInstances from './Instances/aisleInstances'
import { useParams } from 'react-router-dom';
import { getAisleApi } from '../../../services/factoryBuilder/aisle/getAisleApi';
import { useVersionContext } from '../version/versionContext';
import { useSceneContext } from '../../scene/sceneContext';

function AislesGroup() {
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion } = selectedVersionStore();
    const { aisleStore } = useSceneContext();
    const { setAisles } = aisleStore();
    const { projectId } = useParams();

    useEffect(() => {
        if (projectId) {
            getAisleApi(projectId, selectedVersion?.versionId || '').then((aisles) => {
                if (aisles && aisles.length > 0) {
                    setAisles(aisles);
                } else {
                    setAisles([]);
                }
            }).catch((err) => {
                console.log(err);
            })
        }
    }, [projectId, selectedVersion?.versionId])

    return (

        <>

            <AisleCreator />


            <AisleInstances />

        </>

    )
}

export default AislesGroup