import { useRef } from "react";
import {
  usePanoStartPosition,
  usePanoStartPov,
  useTargetPoint,
} from "../../../domain/gameStore";
import styles from "./GamePanel.module.css";
import usePano from "./usePano";
import useSavePanoSettings from "./useSavePanoSettings";

const PositionedStreetView = () => {
  const startPosition = usePanoStartPosition();
  const startPov = usePanoStartPov();
  const resetPosition = useTargetPoint();
  const panoDivRef = useRef(null);
  const panoRef = usePano(panoDivRef, startPosition, startPov);
  useSavePanoSettings(panoRef);
  const reset = () => panoRef.current.setPosition(resetPosition);

  return (
    <>
      <div className={styles.fullsize} ref={panoDivRef} />
      <div
        role="button"
        tabIndex="0"
        className={styles.resetButton}
        onClick={reset}
        onKeyDown={({ key }) => {
          if (key === "Enter") {
            reset();
          }
        }}
      >
        Reset
      </div>
    </>
  );
};

export default PositionedStreetView;
