import {
  AdminOptionsMenu_default
} from "./chunk-VTJYGW27.mjs";
import {
  MemberOptionsMenu_default
} from "./chunk-VBGVEXFB.mjs";
import {
  MainContainer
} from "./chunk-MBW3BAAF.mjs";
import {
  ADMIN_LABEL,
  CHAT_ROOM_PARTICIPANT_ROLES
} from "./chunk-3LL3LZ34.mjs";
import {
  ProfileItemFragment
} from "./chunk-YTT7MYZX.mjs";

// tmp-babel/messages/web/GroupChatDetails/ProfileCard/index.js
import { useCurrentProfile } from "@baseapp-frontend/authentication";
import { AvatarWithPlaceholder } from "@baseapp-frontend/design-system/components/web/avatars";
import { ThreeDotsIcon } from "@baseapp-frontend/design-system/components/web/icons";
import { Popover } from "@baseapp-frontend/design-system/components/web/popovers";
import { usePopover } from "@baseapp-frontend/design-system/hooks/common";
import { Box, IconButton, Typography } from "@mui/material";
import { useFragment } from "react-relay";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var ProfileCard = function ProfileCard2(_ref) {
  var hasAdminPermissions = _ref.hasAdminPermissions, groupMember = _ref.groupMember, initiateRemoval = _ref.initiateRemoval;
  var _useFragment = useFragment(ProfileItemFragment, groupMember.profile), id = _useFragment.id, image = _useFragment.image, name = _useFragment.name, urlPath = _useFragment.urlPath;
  var showUrlPath = !!(urlPath !== null && urlPath !== void 0 && urlPath.path);
  var showAdminLabel = (groupMember === null || groupMember === void 0 ? void 0 : groupMember.role) === CHAT_ROOM_PARTICIPANT_ROLES.admin;
  var showMenu = hasAdminPermissions;
  var _useCurrentProfile = useCurrentProfile(), currentProfile = _useCurrentProfile.currentProfile;
  var popover = usePopover();
  var isMe = (currentProfile === null || currentProfile === void 0 ? void 0 : currentProfile.id) === id;
  var handleRemoveClicked = function handleRemoveClicked2() {
    popover.onClose();
    initiateRemoval(id, name);
  };
  var renderMenuItems = function renderMenuItems2() {
    if (isMe) {
      return /* @__PURE__ */ _jsx(MemberOptionsMenu_default, {
        isMe,
        onViewProfileClicked: popover.onClose,
        onRemoveClicked: handleRemoveClicked
      });
    }
    if (!isMe && hasAdminPermissions) {
      return /* @__PURE__ */ _jsx(AdminOptionsMenu_default, {
        onViewProfileClicked: popover.onClose,
        onToggleAdminClicked: popover.onClose,
        onRemoveClicked: handleRemoveClicked
      });
    }
    return /* @__PURE__ */ _jsx(MemberOptionsMenu_default, {
      isMe,
      onViewProfileClicked: popover.onClose,
      onRemoveClicked: handleRemoveClicked
    });
  };
  return /* @__PURE__ */ _jsxs(MainContainer, {
    children: [/* @__PURE__ */ _jsx(AvatarWithPlaceholder, {
      width: 48,
      height: 48,
      src: image === null || image === void 0 ? void 0 : image.url,
      sx: {
        alignSelf: "center",
        justifySelf: "center"
      }
    }), /* @__PURE__ */ _jsxs(Box, {
      sx: {
        display: "grid",
        gridTemplateRows: "repeat(2, minmax(0, 1fr))"
      },
      children: [/* @__PURE__ */ _jsx(Typography, {
        variant: "subtitle2",
        children: name
      }), /* @__PURE__ */ _jsxs(Box, {
        sx: {
          alignItems: "center",
          display: "grid",
          gridTemplateColumns: "min-content min-content min-content"
        },
        children: [/* @__PURE__ */ _jsx(Typography, {
          variant: "caption",
          color: "text.secondary",
          children: showUrlPath && "@".concat(urlPath.path)
        }), showAdminLabel && showUrlPath && /* @__PURE__ */ _jsx(Box, {
          sx: {
            display: "inline-block",
            height: "6px",
            width: "6px",
            borderRadius: "50%",
            backgroundColor: "text.disabled",
            marginX: "8px"
          }
        }), /* @__PURE__ */ _jsx(Typography, {
          variant: "caption",
          color: "primary.light",
          children: showAdminLabel && ADMIN_LABEL
        })]
      })]
    }), showMenu ? /* @__PURE__ */ _jsxs(Box, {
      children: [/* @__PURE__ */ _jsx(IconButton, {
        onClick: popover.onOpen,
        "aria-label": "Show admin options",
        children: /* @__PURE__ */ _jsx(ThreeDotsIcon, {
          sx: {
            fontSize: "24px"
          }
        })
      }), /* @__PURE__ */ _jsx(Popover, {
        open: popover.open,
        onClose: popover.onClose,
        children: renderMenuItems()
      })]
    }) : /* @__PURE__ */ _jsx(Box, {})]
  }, "profile-".concat(id));
};
var ProfileCard_default = ProfileCard;

export {
  ProfileCard_default
};
//# sourceMappingURL=chunk-ATSU6OG5.mjs.map