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

import { Link } from "react-router-dom"
import Dropdown from "react-bootstrap/Dropdown"
import ButtonToolbar from "react-bootstrap/ButtonToolbar"

import { WishlistButton, RefreshButton } from "../buttons/actions"
import ImdbButton from "../buttons/imdb"

const ShowButtons = (props)  => (
  <ButtonToolbar>
    <ActionsButton
      show={props.show}
      addToWishlist={props.addToWishlist}
      deleteFromWishlist={props.deleteFromWishlist}
      getDetails={props.getDetails}
    />
    <ImdbButton imdbId={props.show.get("imdb_id")} size="sm"/>
    <Link type="button" className="btn btn-primary btn-sm" to={"/shows/details/" + props.show.get("imdb_id")}>
      <i className="fa fa-external-link"></i> Details
    </Link>
  </ButtonToolbar>
);
ShowButtons.propTypes = {
  show: PropTypes.instanceOf(Map),
  addToWishlist: PropTypes.func.isRequired,
  deleteFromWishlist: PropTypes.func.isRequired,
  getDetails: PropTypes.func.isRequired,
}

const ActionsButton = (props) => {
  let wishlisted = (props.show.get("tracked_season") !== null && props.show.get("tracked_episode") !== null);
  return (
    <Dropdown drop="up">
      <Dropdown.Toggle variant="secondary" id="movie-button-actions">
        Actions
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <RefreshButton
          fetching={props.show.get("fetchingDetails")}
          resourceId={props.show.get("imdb_id")}
          getDetails={props.getDetails}
        />
        <WishlistButton
          resourceId={props.show.get("imdb_id")}
          wishlisted={wishlisted}
          addToWishlist={props.addToWishlist}
          deleteFromWishlist={props.deleteFromWishlist}
        />
      </Dropdown.Menu>
    </Dropdown>
  );
}
ActionsButton.propTypes = {
  show: PropTypes.instanceOf(Map),
  addToWishlist: PropTypes.func.isRequired,
  deleteFromWishlist: PropTypes.func.isRequired,
  getDetails: PropTypes.func.isRequired,
}

export default ShowButtons;