import { AFrameScene } from "../../components/AframeScene";
import htmlContent from "./experience.html?raw";
import { useState } from "react";
import { placePortalComponent } from "../../aframe-components/placePortal";
import { introAnimationsComponent } from "../../aframe-components/introAnimations";
import { portalComponent } from "../../aframe-components/portal";
import RelocateButton from "../../components/RelocateButton";
import useIsInside from "../../hooks/useIsInside";

const Portal = () => {
  const [isPlaced, setIsPlaced] = useState(false);
  const { isInside } = useIsInside();

  const onPlace = () => {
    setIsPlaced(true);
    const event = new Event("placement");
    window.dispatchEvent(event);
  };

  return (
    <>
      {isPlaced && <RelocateButton />}
      {!isPlaced && (
        <button className="fixed z-20 text-white" onClick={onPlace}>
          Posicionar portal
        </button>
      )}
      <AFrameScene
        sceneHtml={htmlContent}
        components={[
          portalComponent,
          placePortalComponent,
          introAnimationsComponent,
        ]}
      />
    </>
  );
};

export default Portal;