import React from "react"
import PropTypes from "prop-types"

import { WishlistButton, DeleteButton, RefreshButton } from "../buttons/actions"
import Dropdown  from "react-bootstrap/Dropdown"

const ActionsButton = (props)  => (
  <Dropdown drop="up">
    <Dropdown.Toggle variant="secondary" id="movie-button-actions">
      Actions
    </Dropdown.Toggle>

    <Dropdown.Menu>
      <RefreshButton
        fetching={props.fetching}
        resourceId={props.movieId}
        getDetails={props.getDetails}
      />
      {props.hasMovie &&
          <DeleteButton
            resourceId={props.movieId}
            lastFetchUrl={props.lastFetchUrl}
            deleteFunc={props.deleteMovie}
          />
      }
      <WishlistButton
        resourceId={props.movieId}
        wishlisted={props.wishlisted}
        addToWishlist={props.addToWishlist}
        deleteFromWishlist={props.deleteFromWishlist}
      />
    </Dropdown.Menu>
  </Dropdown>
);
ActionsButton.propTypes = {
  hasMovie: PropTypes.bool.isRequired,
  fetching: PropTypes.bool.isRequired,
  wishlisted: PropTypes.bool.isRequired,
  movieId: PropTypes.string.isRequired,
  getDetails: PropTypes.func.isRequired,
  addToWishlist: PropTypes.func.isRequired,
  deleteFromWishlist: PropTypes.func.isRequired,
  deleteMovie: PropTypes.func.isRequired,
  lastFetchUrl: PropTypes.string.isRequired,
}

export default ActionsButton;