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 { useAisleStore } from '../../../store/builder/useAisleStore';
import { useVersionContext } from '../version/versionContext';

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

    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