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

import Dropdown  from "react-bootstrap/Dropdown"

export const SubtitlesButton = ({
  subtitles,
  inLibrary,
  searching,
  search,
}) => {
  if (inLibrary === false) { return null }

  const count = (subtitles && subtitles.size !== 0) ? subtitles.size : 0;
  return (
    <span className="mr-1 mb-1">
      <Dropdown drop="up">
        <Dropdown.Toggle variant="success">
          <i className="fa fa-language mr-1" />
          Subtitles
          <span className="ml-1 badge badge-pill badge-light">
            {count}
          </span>
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Header>
            <span className="text-warning">Advanced</span>
          </Dropdown.Header>
          <Dropdown.Item onClick={search} >
            <i className={`fa ${ searching ? "fa-spin" : "" } fa-refresh mr-1`} />
            Automatic search
          </Dropdown.Item>
          {count > 0 &&
              <React.Fragment>
                <Dropdown.Divider />
                <Dropdown.Header>
                  <span className="text-warning">
                    Available subtitles
                  </span>
                </Dropdown.Header>
              </React.Fragment>
          }
          {count > 0 && subtitles.toIndexedSeq().map((subtitle, index) => (
            <Dropdown.Item href={subtitle.get("url")} key={index}>
              {subtitle.get("language").split("_")[1]}
            </Dropdown.Item>
          ))}
        </Dropdown.Menu>
      </Dropdown>
    </span>
  );
}
SubtitlesButton.propTypes = {
  subtitles: PropTypes.instanceOf(List),
  inLibrary: PropTypes.bool.isRequired,
  searching: PropTypes.bool.isRequired,
  search: PropTypes.func.isRequired,
}