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

const Ground = ({ grid, plane }: any) => {
  const { toggleView } = useToggleView();
  const savedTheme: string | null = localStorage.getItem("theme");
  const { planeValue, gridValue } = useTileDistance();

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

export default Ground;