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

import Dropdown  from "react-bootstrap/Dropdown"

import RefreshIndicator from "./refresh"

const SubtitlesButton = (props) => {
  const subtitles = props.subtitles;
  const hasSubtitles = !(subtitles === undefined || subtitles === null || subtitles.size === 0);
  const size = props.xs ? "sm" : "";

  return (
    <Dropdown drop="up">
      <Dropdown.Toggle size={size} variant="success" id="movie-subtitles">
        Subtitles
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <RefreshButton
          type={props.type}
          resourceID={props.resourceID}
          season={props.season}
          episode={props.episode}
          fetching={props.fetching ? true : false}
          refreshSubtitles={props.refreshSubtitles}
        />
        {hasSubtitles &&
            <Dropdown.Divider />
        }
        {hasSubtitles && subtitles.toIndexedSeq().map(function(subtitle, index) {
          return (
            <Dropdown.Item key={index} href={subtitle.get("url")}>
              <i className="fa fa-download"></i> &nbsp;{subtitle.get("language").split("_")[1]}
            </Dropdown.Item>
          );
        })}
      </Dropdown.Menu>
    </Dropdown>
  );
}
SubtitlesButton.propTypes = {
  subtitles: PropTypes.instanceOf(List),
  xs: PropTypes.bool,
  fetching: PropTypes.bool,
  refreshSubtitles: PropTypes.func.isRequired,
  type: PropTypes.string.isRequired,
  resourceID: PropTypes.string.isRequired,
  season: PropTypes.number,
  episode: PropTypes.number,
}

export default SubtitlesButton;

const RefreshButton = (props) => {
  const handleClick = () => {
    if (props.fetching) {
      return
    }
    props.refreshSubtitles(props.type, props.resourceID,
      props.season, props.episode);
  }

  return (
    <Dropdown.Item onClick={handleClick}>
      <RefreshIndicator refresh={props.fetching} />
    </Dropdown.Item>
  );
}
RefreshButton.propTypes = {
  fetching: PropTypes.bool,
  refreshSubtitles: PropTypes.func.isRequired,
  type: PropTypes.string.isRequired,
  resourceID: PropTypes.string.isRequired,
  season: PropTypes.number,
  episode: PropTypes.number,
}