/**
 * Intro
 */

import React, { useState, useCallback } from "react";
import Vimeo from "@u-wave/react-vimeo";
import { footprint } from "../utils/shoelace.js";

let playing = false;

const audio = document.createElement("audio");
audio.loop = true;
audio.volume = 0.25;
audio.src = "assets/data_store/X4LM-10m-192k.mp3";

export default function Intro({ onComplete }) {
  const [done, setDone] = useState(false);
  const [started, setStarted] = useState(false);
  const [player, setPlayer] = useState(false);
  const [videoSize] = useState(coverWindow());

  const handleClose = useCallback(() => {
    try {
      audio.play();
    } catch (error) {
      console.error(error);
    }
    setDone(true);
    setTimeout(() => {
      onComplete();
    }, 200);
    footprint("escape");
  }, []);

  const handleEnd = useCallback(() => {
    try {
      audio.play();
    } catch (error) {
      console.error(error);
    }
    setDone(true);
    setTimeout(() => {
      onComplete();
    }, 200);
    footprint("egress");
  }, []);

  const handleStart = useCallback(() => {
    playing = true;
    try {
      audio.play();
    } catch (error) {
      console.error(error);
    }
    setStarted(true);
    if (player) {
      player.play();
    }
    footprint("ingress");
  }, [player]);

  const handleReady = useCallback((player) => {
    setPlayer(player);
    if (playing) {
      player.play();
      setStarted(true);
    }
  });

  return (
    <div className={done ? "intro done" : "intro"}>
      <Vimeo
        video="https://vimeo.com/612279630"
        className="intro-video"
        showByline={false}
        showPortrait={false}
        showTitle={false}
        style={videoSize}
        muted={false}
        volume={1}
        onReady={handleReady}
        onEnd={handleEnd}
      />
      <div
        style={{ backgroundImage: "url(assets/img/no6092start.jpg)" }}
        className={started ? "intro-image playing" : "intro-image"}
        onClick={handleStart}
      />
      {started && (
        <img
          className="close"
          src="./assets/img/close.svg"
          onClick={handleClose}
        />
      )}
    </div>
  );
}

const coverWindow = () => {
  const videoRatio = 1.777;
  const screenRatio = window.innerWidth / window.innerHeight;
  if (screenRatio > videoRatio) {
    return { width: "100vw", height: 100 * 1.777 + "vh" };
  } else {
    return { width: "177vh", height: "100vh" };
  }
};