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

export const ShowMore = ({ children, id, inLibrary }) => {
  const [display, setDisplay] = useState(!inLibrary);

  useEffect(() => {
    setDisplay(!inLibrary);
  }, [id, inLibrary]);

  if (!display) {
    return (
      <span>
        <a
          onClick={() => setDisplay(true)}
          className="badge badge-pill badge-secondary clickable mb-1"
        >
          More options ...
        </a>
      </span>
    );
  }

  return <React.Fragment>{children}</React.Fragment>;
};

ShowMore.propTypes = {
  id: PropTypes.string,
  inLibrary: PropTypes.bool.isRequired,
  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
};
ShowMore.defaultProps = {
  id: "",
  inLibrary: false
};