import { useMemo, useState } from "react";
import classnames from "classnames";
import { Krpano, ROTATE_DIRECTION, Scene, ZOOM_ACTION } from "@dage/krpano";
import { ALL_SCENES, MENUS } from "./constants";
import { MouseHoldView } from "@/components";
import "./index.scss";

export default function HomePage() {
  const [currentMenu, setCurrentMenu] = useState(0);
  const sceneList = useMemo(() => MENUS[currentMenu].scenes, [currentMenu]);
  const [currentScene, setCurrentScene] = useState(sceneList[0].name);

  const handleSceneClick = (name: string) => {
    setCurrentScene(name);
  };

  const handleMenuClick = (idx: number) => {
    setCurrentMenu(idx);
  };

  const handleView = (direction: ROTATE_DIRECTION) => {
    window.ReactKrpanoActionProxy?.rotateView(direction);
  };

  const handleZoom = (action: ZOOM_ACTION) => {
    window.ReactKrpanoActionProxy?.zoomView(action);
  };

  return (
    <div className="home-page">
      <Krpano
        className="krpano"
        currentScene={currentScene}
        passQueryParameters={true}
      >
        {ALL_SCENES.map((sc) => (
          <Scene key={sc.name} {...sc} />
        ))}
      </Krpano>

      <div className="scene-panel">
        <div className="scene-panel__menu">
          {MENUS.map((sc, idx) => (
            <div
              key={sc.title}
              className={classnames([
                "scene-panel__menu__item",
                idx === currentMenu && "active",
              ])}
              onClick={handleMenuClick.bind(undefined, idx)}
            >
              {sc.title}
            </div>
          ))}
        </div>

        <div className="scene-panel__list">
          {sceneList.map((sc) => (
            <div
              key={sc.name}
              className={`scene-panel__list__item ${
                sc.name === currentScene ? "active" : ""
              }`}
              onClick={handleSceneClick.bind(undefined, sc.name)}
            >
              <img
                src={sc.thumbUrl || sc.images![0].url.replace("%s", "f")}
                alt={sc.name}
              />
            </div>
          ))}
        </div>
      </div>

      <div className="toolbar">
        <MouseHoldView
          onHold={handleView.bind(undefined, ROTATE_DIRECTION.LEFT)}
        >
          <button>←</button>
        </MouseHoldView>
        <MouseHoldView
          onHold={handleView.bind(undefined, ROTATE_DIRECTION.RIGHT)}
        >
          <button>→</button>
        </MouseHoldView>
        <MouseHoldView onHold={handleView.bind(undefined, ROTATE_DIRECTION.UP)}>
          <button>↑</button>
        </MouseHoldView>
        <MouseHoldView
          onHold={handleView.bind(undefined, ROTATE_DIRECTION.DOWN)}
        >
          <button>↓</button>
        </MouseHoldView>
        <MouseHoldView onHold={handleZoom.bind(undefined, ZOOM_ACTION.IN)}>
          <button>+</button>
        </MouseHoldView>
        <MouseHoldView onHold={handleZoom.bind(undefined, ZOOM_ACTION.OUT)}>
          <button>-</button>
        </MouseHoldView>
        <button>360°</button>
        <button>vr</button>
      </div>
    </div>
  );
}
