import React, { useMemo } from 'react';
import { WorldChunk } from '@game/components/WorldChunk';
import { Vector3 } from 'three';
import { MAP_HEIGHT, MAP_SCALE, MAP_WIDTH } from '@map/const';
import { Plane } from '@react-three/drei';
import { observer } from 'mobx-react-lite';
import { useVisibleChunks } from '@game/hooks/game';

export const World = observer(() => {
  const chunks = useVisibleChunks();

  const position = useMemo(() => {
    return new Vector3(-2.5, -2.5, -1);
  }, []);

  return (
    <>
      {chunks.map((chunk) => (
        <WorldChunk key={chunk.key} chunk={chunk} />
      ))}

      <Plane args={[MAP_WIDTH * MAP_SCALE, MAP_HEIGHT * MAP_SCALE, 10, 10]} position={position}>
        <meshPhongMaterial depthTest={false} color={'#ff4791'} />
      </Plane>
    </>
  );
});
