import React from "react";
import { useOrientation } from "../../hooks/orientation";
import { useRequiredOrientation } from "../../services/orientation";
import "./RotateOverlay.scss";

/**
 * Full-screen "please rotate the display" overlay. Stays mounted at all
 * times (like Screensaver.jsx) so the opacity transition plays in both
 * directions; visibility is toggled via CSS class rather than conditional
 * rendering.
 *
 * Shown whenever the current route/kiosk (useRequiredOrientation,
 * services/orientation.js) expects a different orientation than the one the
 * device is physically held in (useOrientation, hooks/orientation.jsx) - a
 * route with no requirement (`null`) never shows it.
 */
export const RotateOverlay = () => {
  const orientation = useOrientation();
  const requiredOrientation = useRequiredOrientation();
  const mismatched = requiredOrientation !== null && orientation !== requiredOrientation;

  return (
    <div
      className={`rotate-overlay${mismatched ? " rotate-overlay--visible" : ""}`}
      aria-hidden={!mismatched}>
      <svg
        className="rotate-overlay__icon"
        viewBox="0 0 24 24"
        fill="none"
        aria-hidden="true"
        focusable="false">
        <rect x="7" y="2" width="10" height="16" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
        <line x1="10" y1="16.5" x2="14" y2="16.5" stroke="currentColor" strokeWidth="1.5" />
        <path
          d="M19.5 11a7.5 7.5 0 1 1-2.1-5.2"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
        />
        <path
          d="M19.5 4.5v3.8h-3.8"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
      <p className="rotate-overlay__text">
        Bitte drehen Sie das Display,
        <br />
        um fortzufahren.
      </p>
    </div>
  );
};