import React from "react"

import { Button, Dropdown, MenuItem, Modal } from "react-bootstrap"

export default class DownloadButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
    this.state = { showModal: false };
  }
  showModal() {
    this.setState({ showModal: true });
  }
  hideModal() {
    this.setState({ showModal: false });
  }
  render() {
    if (this.props.url === "") {
      return null;
    }

    let btnSize = "btn-sm";
    if (this.props.xs) {
      btnSize = "btn-xs";
    }

    const infuse = `infuse://x-callback-url/play?url=${this.props.url}`;
    return (
      <Dropdown id="streaming-buttons" className={this.props.customClassName} dropup>
        <Button bsStyle="danger" className={btnSize} href={this.props.url}>
          <span>
            <i className="fa fa-download" aria-hidden="true"></i> Download
          </span>
        </Button>
        <Dropdown.Toggle bsStyle="danger" className={btnSize}/>
        <Dropdown.Menu>
          <MenuItem eventKey="1" href={infuse}>
            <span>
              <i className="fa fa-play"></i> Stream with infuse
            </span>
          </MenuItem>
          <MenuItem eventKey="2" onClick={this.showModal}>
            <span>
              <i className="fa fa-globe"></i> Stream in browser
            </span>
          </MenuItem>
        </Dropdown.Menu>

        <Modal show={this.state.showModal} onHide={this.hideModal} dialogClassName="player-modal">
          <Modal.Header closeButton>
            <Modal.Title>
              <i className="fa fa-globe"></i>
              &nbsp;Browser streaming
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Player
              url={this.props.url}
              subtitles={this.props.subtitles}
            />
          </Modal.Body>
        </Modal>
      </Dropdown>
    );
  }
}

class Player extends React.PureComponent {
  constructor(props) {
    super(props);
  }
  render() {
    const subtitles = this.props.subtitles;
    const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
    return (
      <div className="embed-responsive embed-responsive-16by9">
        <video controls>
          <source src={this.props.url} type="video/mp4"/>
          {hasSubtitles && subtitles.toIndexedSeq().map(function(el, index) {
            return (
              <track
                key={index}
                kind="subtitles"
                label={el.get("language")}
                src={el.get("vvt_file")}
                srcLang={el.get("language")}
              />
            );
          })}
        </video>
      </div>
    );
  }
}