import { useNavigate, useLocation } from "react-router";
import { PRESENTATION_MODES } from "../../services/presentationModes";
import { navigateWithTransition } from "../../utils/viewTransition";
import "./AppSelection.scss";

/**
 * Landing screen at "/": one tile per presentation mode (see
 * PRESENTATION_MODES). Also the target of the idle session reset and of the
 * menu's "Apps" button.
 */
export const AppSelectionPage = () => {
  const navigate = useNavigate();
  const { search } = useLocation();

  // keeps the kiosk config params (see config-schema.js) alive across the app switch
  const openMode = (path) => navigateWithTransition(navigate, `${path}${search}`);

  return (
    <div className="app-selection-page page">
      <div className="app-selection">
        {PRESENTATION_MODES.map(({ key, label, path }) => (
          <button
            key={key}
            type="button"
            className="app-selection__item"
            onClick={() => openMode(path)}>
            {label}
          </button>
        ))}
      </div>
    </div>
  );
};