import React, {useEffect, useRef, useState} from 'react';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';

/** One canonical deck document, with chrome and URL ownership isolated from the portal. */
export default function PresentationEmbed({title, path}: {title: string; path: string}): React.ReactElement {
  const url = useBaseUrl(path);
  const stage = useRef<HTMLDivElement>(null);
  const button = useRef<HTMLButtonElement>(null);
  const [fullscreen, setFullscreen] = useState(false);
  const [error, setError] = useState('');
  useEffect(() => {
    const changed = () => {
      const active = document.fullscreenElement === stage.current;
      setFullscreen(active);
      if (!active) button.current?.focus({preventScroll: true});
    };
    document.addEventListener('fullscreenchange', changed);
    return () => document.removeEventListener('fullscreenchange', changed);
  }, []);
  async function toggleFullscreen() {
    setError('');
    try {
      if (document.fullscreenElement === stage.current) await document.exitFullscreen();
      else if (stage.current?.requestFullscreen) await stage.current.requestFullscreen();
      else setError('Fullscreen is unavailable. Open presentation for a larger view.');
    } catch {
      setError('Fullscreen is unavailable. Open presentation for a larger view.');
    }
  }
  return <div className={styles.stage} ref={stage}>
    <iframe className={styles.frame} src={`${url}?embed`} title={`${title} — interactive presentation`} loading="lazy" allowFullScreen/>
    <div className={styles.actions}>
      <a href={url}>Open presentation <span aria-hidden="true">↗</span></a>
      <button ref={button} type="button" onClick={toggleFullscreen} aria-pressed={fullscreen}>{fullscreen ? 'Exit fullscreen' : 'Fullscreen'}</button>
    </div>
    {error && <p role="status" className={styles.error}>{error}</p>}
  </div>;
}