import type { AppStore } from "@editor/store";
import type { ViewportState } from "@editor/state";
import { PanControls } from "./bottom-controls/PanControls";
import { SelectionControls } from "./bottom-controls/SelectionControls";
import { ZoomControls } from "./bottom-controls/ZoomControls";
import type { SelectionSummary } from "./selectionSummary";

export type BottomControlsAction = "pan" | "zoom";

export type BottomControlsIslandProps = {
  viewport: ViewportState;
  visible: boolean;
  action: BottomControlsAction;
  selection: SelectionSummary;
  dispatch: AppStore["dispatch"];
  onOpenLayers: () => void;
};

export function BottomControlsIsland({ viewport, visible, action, selection, dispatch, onOpenLayers }: BottomControlsIslandProps) {
  const zoomPercent = Math.round(viewport.zoom * 100);
  const x = Math.round(viewport.center.x);
  const y = Math.round(viewport.center.y);

  return (
    <div
      aria-hidden={!visible}
      className={`flex h-10 min-w-48 items-center justify-center gap-2 rounded-full border border-white/10 bg-black/70 px-2 py-1 text-xs text-white shadow-xl backdrop-blur transition-all duration-200 ${
        visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
      }`}
    >
      {selection.type !== "none" ? (
        <SelectionControls selection={selection} onOpenLayers={onOpenLayers} />
      ) : action === "pan" ? (
        <PanControls x={x} y={y} />
      ) : (
        <ZoomControls zoom={viewport.zoom} zoomPercent={zoomPercent} dispatch={dispatch} />
      )}
    </div>
  );
}