import React, { useState } from "react";
import PropTypes from "prop-types";

import Dropdown from "react-bootstrap/Dropdown";

import { prettySize, upperCaseFirst } from "../../utils";

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

  /* eslint-disable */
  const [show, setShow] = useState(false);
  /* eslint-enable */

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

  const searchAll = () => {
    const langs = ["fr_FR", "en_US"];
    for (const lang of langs) {
      search(lang);
    }
  };

  const count = subtitles && subtitles.size !== 0 ? subtitles.size : 0;

  const searching = fetchingSubtitles.length > 0;

  return (
    <span className="mr-1 mb-1">
      <Dropdown drop="up" show={show} onToggle={onToggle}>
        <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={searchAll}>
            <div className="d-flex justify-content-between align-items-center">
              <span>Automatic search</span>
              <div
                className={`fa ${searching ? "fa-spin" : ""} fa-refresh ml-1`}
              />
            </div>
          </Dropdown.Item>
          {count > 0 && (
            <React.Fragment>
              <Dropdown.Divider />
              <Dropdown.Header>
                <span className="text-warning">Available subtitles</span>
              </Dropdown.Header>
            </React.Fragment>
          )}
          {count > 0 &&
            [...subtitles.entries()].map(([lang, subtitle]) => (
              <SubtitleEntry
                key={lang}
                subtitle={subtitle}
                searching={searching}
                search={search}
              />
            ))}
        </Dropdown.Menu>
      </Dropdown>
    </span>
  );
};
SubtitlesButton.propTypes = {
  subtitles: PropTypes.object,
  inLibrary: PropTypes.bool.isRequired,
  fetchingSubtitles: PropTypes.array.isRequired,
  search: PropTypes.func.isRequired,
};

export const SubtitleEntry = ({ subtitle, search }) => {
  const lang = upperCaseFirst(subtitle.lang.split("_")[0]);
  const size = subtitle.size ? subtitle.size : 0;
  const embedded = subtitle.embedded ? subtitle.embedded : false;

  const handleRefresh = () => {
    search(subtitle.lang);
  };

  return (
    <Dropdown.Item as="span" disabled={embedded}>
      <div className="d-flex justify-content-between align-items-center">
        <a href={subtitle.url ? subtitle.url : ""} className="link-unstyled">
          {lang}
          {embedded && <small className="ml-2">(Inside the video)</small>}
          {size !== 0 && <span> ({prettySize(size)})</span>}
        </a>
        {!embedded && (
          <div
            onClick={handleRefresh}
            className={`clickable fa ${
              subtitle.searching ? "fa-spin" : ""
            } fa-refresh`}
          />
        )}
      </div>
    </Dropdown.Item>
  );
};
SubtitleEntry.propTypes = {
  search: PropTypes.func.isRequired,
  subtitle: PropTypes.object,
};