"use client";

import { useContext, useEffect, useRef } from "react";
import { SceneView } from "../three/SceneView";
import {
  SceneViewContext,
  SceneViewContextType,
} from "../providers/scene-view-provider";

export function Map() {
  const divRef = useRef<HTMLDivElement>(null);
  const { setSceneView } = useContext(SceneViewContext) as SceneViewContextType;

  useEffect(() => {
    let ignore = false;
    if (!divRef.current) return;

    async function loadScene() {
      if (divRef.current) {
        const _sceneView = await SceneView.create(divRef.current, "20");
        if (_sceneView) {
          setSceneView(_sceneView);
        }
      }
    }

    if (!ignore) {
      loadScene();
    }

    return () => {
      ignore = true;
    };
  }, [divRef]);

  return (
    <div className="w-full h-full flex flex-col justify-center">
      <div className="w-full h-full" ref={divRef}></div>
    </div>
  );
}