import { useEffect } from 'react';
import { useToggleView } from '../../../store/builder/store'
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import { useVersionContext } from '../version/versionContext';
import { useSceneContext } from '../../scene/sceneContext';
import { useParams } from 'react-router-dom';
import useModuleStore from '../../../store/useModuleStore';
import FloorCreator from './floorCreator/floorCreator';
import FloorInstances from './Instances/floorInstances';
import { getFloorsApi } from '../../../services/factoryBuilder/floor/getFloorsApi';

function FloorGroup() {
    const { togglView } = useToggleView();
    const { setSelectedFloor, setSelectedDecal } = useBuilderStore();
    const { activeModule } = useModuleStore();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion } = selectedVersionStore();
    const { floorStore } = useSceneContext();
    const { setFloors } = floorStore();
    const { projectId } = useParams();

    useEffect(() => {
        if (togglView || activeModule !== 'builder') {
            setSelectedFloor(null);
            setSelectedDecal(null);
        }
    }, [togglView, activeModule])

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

    return (
        <>

            <FloorCreator />

            <FloorInstances />

        </>
    )
}

export default FloorGroup