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

import Modal  from "react-bootstrap/Modal"
import Dropdown  from "react-bootstrap/Dropdown"
import SplitButton  from "react-bootstrap/SplitButton"

const DownloadButton = (props) => {
  if (props.url === "") { return null; }
  const size = props.xs ? "sm" : "";

  const [showModal, setShowModal] = useState(false);

  return (
    <React.Fragment>
      <SplitButton
        drop="up"
        variant="danger"
        href={props.url}
        title="Download"
        size={size}
        id="download-button-id">
        <Dropdown.Item eventKey="1" onClick={() => setShowModal(true)}>
          <span>
            <i className="fa fa-globe"></i> Stream in browser
          </span>
        </Dropdown.Item>
      </SplitButton>

      <Modal show={showModal} onHide={() => setShowModal(false)} size="lg" centered>
        <Modal.Header closeButton>{props.name}</Modal.Header>
        <Modal.Body>
          <Player url={props.url} subtitles={props.subtitles} />
        </Modal.Body>
      </Modal>
    </React.Fragment>
  );
}
DownloadButton.propTypes = {
  name: PropTypes.string,
  xs: PropTypes.bool,
  url: PropTypes.string.isRequired,
  subtitles: PropTypes.instanceOf(List),
};
export default DownloadButton;

const Player = (props) => {
  const subtitles = props.subtitles;
  const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
  return (
    <div className="embed-responsive embed-responsive-16by9">
      <video className="embed-responsive-item" controls>
        <source src={props.url} type="video/mp4"/>
        {hasSubtitles && subtitles.toIndexedSeq().map((el, index) => (
          <track
            key={index}
            kind="subtitles"
            label={el.get("language")}
            src={el.get("vvt_file")}
            srcLang={el.get("language")}
          />
        ))}
      </video>
    </div>
  );
}
Player.propTypes = {
  subtitles: PropTypes.instanceOf(List),
  url: PropTypes.string.isRequired,
};