import { useEffect } from 'react';
import { useToggleView } from '../../../store/builder/store'
import { useBuilderStore } from '../../../store/builder/useBuilderStore';
import WallCreator from './wallCreator/wallCreator'
import WallInstances from './Instances/wallInstances'
import useModuleStore from '../../../store/useModuleStore';

function WallGroup() {
    const { togglView } = useToggleView();
    const { setSelectedWall, setSelectedDecal } = useBuilderStore();
    const { activeModule } = useModuleStore();

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

    return (
        <>

            <WallCreator />

            <WallInstances />

        </>
    )
}

export default WallGroup