import React from "react";
import PropTypes from "prop-types";
import { useConfig } from "../../../services/config/config";
import { IntroLoopVideo } from "../../IntroLoopVideo";
import "./StoryTitle.scss";

/**
 * Full-bleed story opener ("storyTitle" element type): big title over an
 * optional background artwork. When `videoIntro`/`videoLoop` are set and
 * `disableAnimations` isn't, an animated background plays on top of the
 * static `background` image instead of it.
 *
 * @param {Object} props
 * @param {string} props.title - Story title text.
 * @param {string} [props.background] - Background image URL, also the
 *   fallback shown when the video is disabled/missing/still loading.
 * @param {string} [props.videoIntro] - Background video played once.
 * @param {string} [props.videoLoop] - Background video played after, on loop.
 */
export const StoryTitle = ({ title, background, videoIntro, videoLoop }) => {
  const { disableAnimations } = useConfig();
  const showVideo = !disableAnimations && videoIntro && videoLoop;

  return (
    <div className="story-title">
      {background && <img className="story-title-background" src={background} alt="" />}
      {showVideo && (
        <IntroLoopVideo
          className="story-title-background"
          intro={videoIntro}
          loop={videoLoop}
          muted
          playsInline
        />
      )}
      <div className="story-title__container">
        <h1>{title}</h1>
      </div>
    </div>
  );
};

StoryTitle.propTypes = {
  title: PropTypes.string.isRequired,
  background: PropTypes.string,
  videoIntro: PropTypes.string,
  videoLoop: PropTypes.string,
};