import React from "react"

import { DropdownButton, MenuItem } from "react-bootstrap"

import RefreshIndicator from "./refresh"

export default function SubtitlesButton(props) {
  const btnSize = props.xs ? "xsmall" : "small";
  const subtitles = props.subtitles;
  const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
  return (
    <DropdownButton
      bsStyle="success"
      bsSize={btnSize}
      title="Subtitles"
      id="download-subtitles-button"
      dropup>
      <RefreshButton
        type={props.type}
        resourceID={props.resourceID}
        season={props.season}
        episode={props.episode}
        fetching={props.fetching}
        refreshSubtitles={props.refreshSubtitles}
      />
      {hasSubtitles &&
          <MenuItem divider></MenuItem>
      }
      {hasSubtitles && subtitles.toIndexedSeq().map(function(subtitle, index) {
        return (
          <MenuItem key={index} href={subtitle.get("url")}>
            <i className="fa fa-download"></i> &nbsp;{subtitle.get("language").split("_")[1]}
          </MenuItem>
        );
      })}
    </DropdownButton>
  );
}

class RefreshButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    e.preventDefault();
    if (this.props.fetching) {
      return
    }
    this.props.refreshSubtitles(this.props.type, this.props.resourceID,
      this.props.season, this.props.episode);
  }
  render() {
    return (
      <MenuItem onClick={this.handleClick}>
        <RefreshIndicator refresh={this.props.fetching} />
      </MenuItem>
    );
  }
}