import React from "react"

import { Link } from "react-router-dom"
import { DropdownButton } from "react-bootstrap"

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

export default function ShowButtons(props) {
  return (
    <div className="list-details-buttons btn-toolbar">
      <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>
    </div>
  );
}

function ActionsButton(props) {
  let wishlisted = (props.show.get("tracked_season") !== null && props.show.get("tracked_episode") !== null);
  return (
    <DropdownButton className="btn btn-default btn-sm" title="Actions" id="actions-button" dropup>
      <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}
      />
    </DropdownButton>
  );
}