import React, { useState } 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;
  }
  /* eslint-disable */
  const [show, setShow] = useState(false);
  /* eslint-enable */

  const onSelect = (eventKey) => {
    if (eventKey === null || eventKey != 1) {
      setShow(false);
    }
  };

  const onToggle = (isOpen, event, metadata) => {
    // Don't close on select
    if (metadata && metadata.source !== "select") {
      setShow(isOpen);
    }
  };

  const count = subtitles && subtitles.size !== 0 ? subtitles.size : 0;
  return (
    <span className="mr-1 mb-1">
      <Dropdown drop="up" show={show} onToggle={onToggle} onSelect={onSelect}>
        <Dropdown.Toggle variant="secondary" bsPrefix="btn-sm w-md-100">
          <i className="fa fa-commenting mr-1" />
          Subtitles
          <span className="ml-1 badge badge-pill badge-info">{count}</span>
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item eventKey={1} 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,
};