import type { CSSProperties } from "react";
import type { Vector3Tuple } from "../game/dungeonManifest";
import { DungeonMapGraphic } from "./DungeonMapGraphic";

export interface MinimapProps {
  position: Vector3Tuple;
  yaw: number;
  areaName: string;
  distanceTravelled?: number;
  rotationMode?: "north-up" | "player-up";
  onOpenMap: () => void;
}

export function Minimap({
  position,
  yaw,
  areaName,
  distanceTravelled = 0,
  rotationMode = "north-up",
  onOpenMap,
}: MinimapProps) {
  const heading = ((Math.round((yaw * 180) / Math.PI) % 360) + 360) % 360;
  return (
    <section className="hud-minimap" aria-label="Dungeon minimap">
      <button type="button" className="hud-minimap__map" onClick={onOpenMap} aria-label="Open full dungeon map">
        <span className="hud-minimap__north" aria-hidden="true">N</span>
        <span
          className="hud-minimap__viewport"
          style={{ "--minimap-turn": rotationMode === "player-up" ? `${-yaw}rad` : "0rad" } as CSSProperties}
          aria-hidden="true"
        >
          <DungeonMapGraphic position={position} yaw={yaw} compact />
        </span>
        <span className="hud-minimap__heading" aria-hidden="true">{heading}°</span>
      </button>
      <div className="hud-minimap__caption">
        <strong>{areaName}</strong>
        <span>{Math.round(distanceTravelled)} m explored · <kbd>M</kbd> map</span>
      </div>
    </section>
  );
}