import * as THREE from 'three';
import { useToggleView } from '../../../store/store';
import * as CONSTANTS from '../../../types/world/worldConstants';

const Ground = ({ grid, plane }: any) => {
    const { toggleView, setToggleView } = useToggleView();

    return (

        <mesh name="Ground">
            <mesh ref={grid} name="Grid" position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}>
                <gridHelper args={[CONSTANTS.gridConfig.size, CONSTANTS.gridConfig.divisions, CONSTANTS.gridConfig.primaryColor, CONSTANTS.gridConfig.secondaryColor]} />
            </mesh>
            <mesh ref={plane} rotation-x={CONSTANTS.planeConfig.rotation} position={!toggleView ? CONSTANTS.planeConfig.position3D : CONSTANTS.planeConfig.position2D} name="Plane" receiveShadow>
                <planeGeometry args={[CONSTANTS.planeConfig.width, CONSTANTS.planeConfig.height]} />
                <meshBasicMaterial color={CONSTANTS.planeConfig.color} />
            </mesh>
        </mesh>
    )
}

export default Ground;