import React, { useState } from "react";
import PropTypes from "prop-types";
import { Menu } from "@material-ui/core";
import ActionButton from "./ActionButton";
import { MoreHorizOutlined } from "@material-ui/icons";
import { useTranslation } from "react-i18next";

const SecondaryActionsGroup = ({ resource, actions }) => {
  const [menuAnchor, setMenuAnchor] = useState(null);
  const { t } = useTranslation();

  return (
    <>
      <ActionButton
        key={`resource-${resource.resourceId}-more`}
        action={{
          code: "more",
          effect: (event) => setMenuAnchor(event.currentTarget),
          icon: MoreHorizOutlined,
          tooltip: t("Generic.More"),
          top: true
        }}
        resource={resource}
      />
      <Menu
        id={`resource-${resource.resourceId}-secondary-actions-menu`}
        key={`resource-${resource.resourceId}-secondary-actions-menu`}
        anchorEl={menuAnchor}
        open={Boolean(menuAnchor)}
        onClose={() => setMenuAnchor(null)}
      >
        {actions.map((action) => (
          <ActionButton
            key={`resource-${resource.resourceId}-${action.code}`}
            action={action}
            resource={resource}
          />
        ))}
      </Menu>
    </>
  );
};

SecondaryActionsGroup.propTypes = {
  resource: PropTypes.object.isRequired,
  actions: PropTypes.array.isRequired
};

export default SecondaryActionsGroup;
