import React, { useEffect } from 'react';
import { useWallStore } from '../../../../store/builder/useWallStore'
import WallInstance from './instance/wallInstance';
import Line from '../../line/line';
import Point from '../../point/point';
import { useToggleView } from '../../../../store/builder/store';
import { Geometry } from '@react-three/csg';

function WallInstances() {
    const { walls } = useWallStore();
    const { toggleView } = useToggleView();

    useEffect(() => {
        // console.log('walls: ', walls);
    }, [walls])

    return (
        <>

            <Geometry computeVertexNormals useGroups>
                {walls.map((wall) => (
                    <WallInstance key={wall.wallUuid} wall={wall} />
                ))}
            </Geometry>


            {toggleView && (
                <>
                    {walls.map((wall) => (
                        <React.Fragment key={wall.wallUuid}>
                            <Point point={wall.points[0]} />
                            <Line points={wall.points} />
                            <Point point={wall.points[1]} />
                        </React.Fragment>
                    ))}
                </>
            )}
        </>
    )
}

export default WallInstances