import {
  ChatRoomOptions_default
} from "./chunk-HQZYX45A.mjs";
import {
  BackButtonContainer,
  ChatHeaderContainer,
  ChatTitleContainer
} from "./chunk-RHVNC3GK.mjs";
import {
  LeaveGroupDialog_default
} from "./chunk-FWQIW6VM.mjs";
import {
  TitleFragment
} from "./chunk-NEOJBPUN.mjs";
import {
  useArchiveChatRoomMutation
} from "./chunk-PMODPNJC.mjs";
import {
  useChatRoom_default
} from "./chunk-U2XGYM5M.mjs";
import {
  getParticipantCountString,
  useCheckIsAdmin,
  useNameAndAvatar
} from "./chunk-2RPURWVV.mjs";
import {
  RoomTitleFragment
} from "./chunk-6LKVRW5I.mjs";

// tmp-babel/messages/web/ChatRoom/ChatRoomHeader/index.js
import { useState } from "react";
import { useCurrentProfile } from "@baseapp-frontend/authentication";
import { AvatarWithPlaceholder } from "@baseapp-frontend/design-system/components/web/avatars";
import { IconButton } from "@baseapp-frontend/design-system/components/web/buttons";
import { ThreeDotsIcon } from "@baseapp-frontend/design-system/components/web/icons";
import { Iconify } from "@baseapp-frontend/design-system/components/web/images";
import { Popover } from "@baseapp-frontend/design-system/components/web/popovers";
import { TypographyWithEllipsis } from "@baseapp-frontend/design-system/components/web/typographies";
import { usePopover } from "@baseapp-frontend/design-system/hooks/common";
import { useResponsive } from "@baseapp-frontend/design-system/hooks/web";
import { Box, Typography } from "@mui/material";
import { useFragment } from "react-relay";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
function _slicedToArray(r, e) {
  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _unsupportedIterableToArray(r, a) {
  if (r) {
    if ("string" == typeof r) return _arrayLikeToArray(r, a);
    var t = {}.toString.call(r).slice(8, -1);
    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
  }
}
function _arrayLikeToArray(r, a) {
  (null == a || a > r.length) && (a = r.length);
  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
  return n;
}
function _iterableToArrayLimit(r, l) {
  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
  if (null != t) {
    var e, n, i, u, a = [], f = true, o = false;
    try {
      if (i = (t = t.call(r)).next, 0 === l) {
        if (Object(t) !== t) return;
        f = false;
      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = true) ;
    } catch (r2) {
      o = true, n = r2;
    } finally {
      try {
        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
      } finally {
        if (o) throw n;
      }
    }
    return a;
  }
}
function _arrayWithHoles(r) {
  if (Array.isArray(r)) return r;
}
var ChatRoomHeader = function ChatRoomHeader2(_ref) {
  var _currentProfile$id, _currentProfile$id2;
  var isArchived = _ref.isArchived, participantsCount = _ref.participantsCount, roomTitleRef = _ref.roomTitleRef, onDisplayGroupDetailsClicked = _ref.onDisplayGroupDetailsClicked, roomId = _ref.roomId;
  var roomHeader = useFragment(TitleFragment, roomTitleRef);
  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), open = _useState2[0], setOpen = _useState2[1];
  var _useCurrentProfile = useCurrentProfile(), currentProfile = _useCurrentProfile.currentProfile;
  var isUpToMd = useResponsive("up", "md");
  var _useChatRoom = useChatRoom_default(), resetChatRoom = _useChatRoom.resetChatRoom;
  var isGroup = roomHeader.isGroup;
  var _useNameAndAvatar = useNameAndAvatar(roomHeader), title = _useNameAndAvatar.title, avatar = _useNameAndAvatar.avatar;
  var _useFragment = useFragment(RoomTitleFragment, roomHeader), participants = _useFragment.participants;
  var _useCheckIsAdmin = useCheckIsAdmin(participants), isSoleAdmin = _useCheckIsAdmin.isSoleAdmin;
  var members = getParticipantCountString(participantsCount);
  var popover = usePopover();
  var _useArchiveChatRoomMu = useArchiveChatRoomMutation(), _useArchiveChatRoomMu2 = _slicedToArray(_useArchiveChatRoomMu, 2), commit = _useArchiveChatRoomMu2[0], isMutationInFlight = _useArchiveChatRoomMu2[1];
  var toggleArchiveChatroom = function toggleArchiveChatroom2() {
    popover.onClose();
    if (currentProfile !== null && currentProfile !== void 0 && currentProfile.id && roomId) {
      commit({
        variables: {
          input: {
            roomId,
            profileId: currentProfile.id,
            archive: !isArchived
          }
        }
      });
    }
  };
  var onChatRoomOptionsClicked = function onChatRoomOptionsClicked2(e) {
    e.stopPropagation();
    popover.onOpen(e);
  };
  return /* @__PURE__ */ _jsxs(_Fragment, {
    children: [/* @__PURE__ */ _jsx(LeaveGroupDialog_default, {
      open,
      onClose: function onClose() {
        return setOpen(false);
      },
      profileId: (_currentProfile$id = currentProfile === null || currentProfile === void 0 ? void 0 : currentProfile.id) !== null && _currentProfile$id !== void 0 ? _currentProfile$id : "",
      roomId,
      removingParticipantId: (_currentProfile$id2 = currentProfile === null || currentProfile === void 0 ? void 0 : currentProfile.id) !== null && _currentProfile$id2 !== void 0 ? _currentProfile$id2 : "",
      isSoleAdmin
    }), /* @__PURE__ */ _jsxs(ChatHeaderContainer, {
      children: [isUpToMd ? /* @__PURE__ */ _jsx("div", {}) : /* @__PURE__ */ _jsx(BackButtonContainer, {
        children: /* @__PURE__ */ _jsx(IconButton, {
          "aria-label": "return to chat room list",
          onClick: resetChatRoom,
          sx: {
            maxWidth: "fit-content"
          },
          children: /* @__PURE__ */ _jsx(Iconify, {
            icon: "eva:arrow-ios-back-fill",
            width: 24
          })
        })
      }), /* @__PURE__ */ _jsxs(ChatTitleContainer, {
        onClick: isGroup ? onDisplayGroupDetailsClicked : void 0,
        isClickable: isGroup,
        children: [/* @__PURE__ */ _jsx(AvatarWithPlaceholder, {
          className: "self-start justify-self-center",
          width: 32,
          height: 32,
          src: avatar,
          sx: {
            border: "none",
            alignSelf: "center"
          }
        }), /* @__PURE__ */ _jsxs(Box, {
          children: [/* @__PURE__ */ _jsx(TypographyWithEllipsis, {
            component: "span",
            variant: "subtitle2",
            maxWidth: isUpToMd ? "300px" : "200px",
            sx: {
              "float": "left",
              clear: "left"
            },
            children: title
          }), isGroup && /* @__PURE__ */ _jsx(Typography, {
            component: "span",
            variant: "caption",
            sx: {
              "float": "left",
              clear: "left"
            },
            children: members
          })]
        }), /* @__PURE__ */ _jsxs(Box, {
          children: [/* @__PURE__ */ _jsx(IconButton, {
            onClick: onChatRoomOptionsClicked,
            "aria-label": "Show chatroom options",
            children: /* @__PURE__ */ _jsx(ThreeDotsIcon, {
              sx: {
                fontSize: "24px"
              }
            })
          }), /* @__PURE__ */ _jsx(Popover, {
            open: popover.open,
            onClose: popover.onClose,
            slotProps: {
              root: {
                onClick: function onClick(e) {
                  return e.stopPropagation();
                }
              }
            },
            children: /* @__PURE__ */ _jsx(ChatRoomOptions_default, {
              isArchived,
              isArchiveMutationInFlight: isMutationInFlight,
              isGroup,
              onArchiveClicked: toggleArchiveChatroom,
              onDetailsClicked: function onDetailsClicked() {
                popover.onClose();
                onDisplayGroupDetailsClicked();
              },
              onLeaveClicked: function onLeaveClicked() {
                popover.onClose();
                setOpen(true);
              }
            })
          })]
        })]
      })]
    })]
  });
};
var ChatRoomHeader_default = ChatRoomHeader;

export {
  ChatRoomHeader_default
};
//# sourceMappingURL=chunk-NTL6UKFW.mjs.map