import { useTileDistance, useToggleView } from "../../../store/builder/store";
import * as CONSTANTS from "../../../types/world/worldConstants";

const Ground = ({ plane }: any) => {
    const { toggleView } = useToggleView();
    const { planeValue, gridValue } = useTileDistance();

    return (
        <mesh name="Ground">
            <mesh
                name="Grid"
                position={!toggleView ? CONSTANTS.gridConfig.position3D : CONSTANTS.gridConfig.position2D}
            >
                <gridHelper
                    args={[
                        gridValue.size,
                        gridValue.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={[planeValue.width, planeValue.height]} />
                <meshBasicMaterial color={CONSTANTS.planeConfig.color} />
            </mesh>
        </mesh>
    );
};

export default Ground;
