import { restzeitText, ZEITWARNUNG_MS } from '../../pruefung/zeit';

export interface RestzeitProps {
  /** Verbleibende Zeit in Millisekunden; `null`, wenn keine Uhr läuft. */
  readonly verbleibendMs: number | null;
  readonly mitZeitlimit: boolean;
}

/**
 * Restzeitanzeige.
 *
 * Bewusst ruhig: ausgeschriebene Minuten statt eines sekündlich springenden
 * Zählers, keine Live-Region und keine Animation. Der Wert steht als
 * vorlesbarer Text da, und die knappe Restzeit ist am Ausrufezeichen und am
 * Wortlaut erkennbar – nicht allein an der Farbe (WCAG 1.4.1).
 */
export function Restzeit({ verbleibendMs, mitZeitlimit }: RestzeitProps): React.JSX.Element {
  if (!mitZeitlimit || verbleibendMs === null) {
    return (
      <div className="restzeit restzeit--ohne">
        <p className="restzeit__zeile">
          <span className="restzeit__marke">Zeit:</span>{' '}
          <span className="restzeit__wert">Ohne Zeitbegrenzung</span>
        </p>
        <p className="restzeit__hinweis">Es läuft keine Uhr mit. Sie geben ab, wann Sie möchten.</p>
      </div>
    );
  }

  const knapp = verbleibendMs <= ZEITWARNUNG_MS;

  return (
    <div className={`restzeit${knapp ? ' restzeit--knapp' : ''}`}>
      <p className="restzeit__zeile">
        {knapp ? (
          <span className="restzeit__symbol" aria-hidden="true">
            !
          </span>
        ) : null}
        <span className="restzeit__marke">Restzeit:</span>{' '}
        <span className="restzeit__wert">
          {knapp ? 'Nur noch ' : ''}
          {restzeitText(verbleibendMs)}
        </span>
      </p>
      <p className="restzeit__hinweis">
        Wenn die Zeit abgelaufen ist, wird die Simulation automatisch abgegeben und ausgewertet.
      </p>
    </div>
  );
}
