import React, { useState } from "react";
import PropTypes from "prop-types";

import Modal from "react-bootstrap/Modal";

export const DownloadAndStream = ({ url, name, subtitles }) => {
  if (!url || url === "") {
    return null;
  }

  return (
    <span>
      <DownloadButton url={url} />
      <StreamButton url={url} name={name} subtitles={subtitles} />
    </span>
  );
};
DownloadAndStream.propTypes = {
  url: PropTypes.string,
  name: PropTypes.string,
  subtitles: PropTypes.object,
};

const DownloadButton = ({ url }) => (
  <h5 className="d-inline">
    <a href={url} className="btn btn-sm btn-primary m-1">
      <i className="fa fa-download mr-1" />
      Download
    </a>
  </h5>
);
DownloadButton.propTypes = { url: PropTypes.string.isRequired };

const StreamButton = ({ name, url, subtitles }) => {
  const [showModal, setShowModal] = useState(false);

  return (
    <React.Fragment>
      <h5 className="d-inline">
        <a
          href="#"
          className="btn btn-sm btn-primary m-1 clickable"
          onClick={(e) => {
            e.preventDefault();
            setShowModal(true);
          }}
        >
          <i className="fa fa-play-circle mr-1" />
          Play
        </a>
      </h5>

      <Modal
        show={showModal}
        onHide={() => setShowModal(false)}
        size="lg"
        centered
      >
        <Modal.Header closeButton>{name}</Modal.Header>
        <Modal.Body>
          <Player url={url} subtitles={subtitles} />
        </Modal.Body>
      </Modal>
    </React.Fragment>
  );
};
StreamButton.propTypes = {
  name: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  subtitles: PropTypes.object,
};

const Player = ({ url, subtitles }) => {
  return (
    <div className="embed-responsive embed-responsive-16by9">
      <video className="embed-responsive-item" controls>
        <source src={url} type="video/mp4" />
        {subtitles &&
          [...subtitles.entries()].map(([lang, sub]) => {
            if (sub.embedded) {
              return null;
            }

            return (
              <track
                key={lang}
                kind="subtitles"
                label={sub.lang}
                src={sub.vvt_file}
                srcLang={sub.lang}
              />
            );
          })}
      </video>
    </div>
  );
};
Player.propTypes = {
  subtitles: PropTypes.object,
  url: PropTypes.string.isRequired,
};