"use strict";

/** @format */

import React, { useCallback } from 'react';
import { CenterContainer, ChatContainerHeader, ChatContainerHeaderBoxInfo, ChatContainerHeaderInfo, ChatContainerHeaderLabel } from '../styled/StyledComponents';
import RoomList from './RoomList';
import { ProfileImagePlaceholder } from './ProfileImagePlaceholder';
import Button from '../styled/Button';
import { BackIcon, BurgerMenuIcon } from '../../assets/icons';
import { useDispatch } from 'react-redux';
import Composing from '../styled/StyledInputComponents/Composing';
import { deleteRoom, setCurrentRoom, setIsLoading } from '../../roomStore/roomsSlice';
import { useXmppClient } from '../../context/xmppProvider';
import { setActiveModal } from '../../roomStore/chatSettingsSlice';
import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
import { RoomMenu } from '../MenuRoom/MenuRoom';
import { useRoomState } from '../../hooks/useRoomState';
import { useChatSettingState } from '../../hooks/useChatSettingState';
import { View, StyleSheet, Text, Keyboard } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const ChatHeader = ({
  currentRoom,
  handleBackClick
}) => {
  const dispatch = useDispatch();
  const {
    client
  } = useXmppClient();
  const {
    roomsList,
    activeRoomJID
  } = useRoomState(currentRoom.jid);
  const roomState = useRoomState(currentRoom.jid).room;
  const composing = roomState?.composing;
  const {
    config
  } = useChatSettingState();
  const handleChangeChat = chat => {
    dispatch(setCurrentRoom({
      roomJID: chat.jid
    }));
    dispatch(setIsLoading({
      chatJID: chat.jid,
      loading: true
    }));
  };
  const handleLeaveClick = useCallback(() => {
    client?.leaveTheRoomStanza(activeRoomJID);
    dispatch(deleteRoom({
      jid: activeRoomJID
    }));
    const nextRoomJID = Object.keys(roomsList)[0] || null;
    if (nextRoomJID) {
      dispatch(setCurrentRoom({
        roomJID: nextRoomJID
      }));
    }
  }, [activeRoomJID, roomsList, dispatch, client]);
  const handleHeaderChatMenu = () => {
    Keyboard.dismiss();
    config?.headerChatMenu && config?.headerChatMenu();
  };

  // Shared open-chat-info handler used by BOTH the outer touchable row
  // and the avatar's own press (the avatar otherwise absorbs taps without
  // bubbling — see the comment on ProfileImagePlaceholder below).
  const openChatInfo = useCallback(() => dispatch(setActiveModal(MODAL_TYPES.CHAT_PROFILE)), [dispatch]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(ChatContainerHeader, {
      children: [handleBackClick && !config?.headerChatMenu ? /*#__PURE__*/_jsx(View, {
        style: styles.leftContainer,
        children: /*#__PURE__*/_jsx(Button, {
          EndIcon: /*#__PURE__*/_jsx(BackIcon, {}),
          onPress: () => handleBackClick(false)
        })
      }) : !config?.disableChatHeaderBurgerMenuIcon ? /*#__PURE__*/_jsx(View, {
        style: styles.leftContainer,
        children: /*#__PURE__*/_jsx(Button, {
          style: styles.menuButton,
          color: "black",
          unstyled: true,
          EndIcon: /*#__PURE__*/_jsx(BurgerMenuIcon, {
            color: config?.colors?.primary
          }),
          onPress: handleHeaderChatMenu
        })
      }) : null
      /* Don't reserve the 15%-wide leftContainer when both the back
       * button is absent AND the burger icon is hidden — the empty
       * slot used to steal width from the title row, clipping the chat
       * name. Customer-reported #15. The right action area still fills
       * its own slot, so the title now starts at the left edge as
       * intended by `disableChatHeaderBurgerMenuIcon`. */, /*#__PURE__*/_jsxs(CenterContainer, {
        style: {
          minHeight: 40
        },
        rightSpace: config?.disableRoomConfig,
        leftSpace: !!config?.headerChatMenu,
        children: [config?.chatHeaderBurgerMenu && roomsList && /*#__PURE__*/_jsx(RoomList, {
          chats: Object.values(roomsList),
          burgerMenu: true,
          onRoomClick: handleChangeChat
        }), /*#__PURE__*/_jsxs(ChatContainerHeaderBoxInfo, {
          onPress: openChatInfo
          // Gates the entry to the CHAT-INFO modal (room name, members,
          // settings) via the dedicated `disableChatInfo.disableChatHeaderMenu`
          // flag. Previously wired to `disableProfilesInteractions`, which
          // is for USER-profile popups (the in-bubble avatar tap, see
          // Message.tsx) — wrong semantic gate, and it meant a consumer
          // who wanted to hide user profiles also lost their entry to
          // the chat info screen.
          ,
          disabled: config?.disableChatInfo?.disableChatHeaderMenu,
          children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
            name: currentRoom?.title || currentRoom?.name,
            size: 40,
            icon: currentRoom?.icon,
            active: !config?.disableChatInfo?.disableChatHeaderMenu,
            click: config?.disableChatInfo?.disableChatHeaderMenu ? undefined : {
              isClick: true,
              onPress: openChatInfo
            }
          }), /*#__PURE__*/_jsxs(ChatContainerHeaderInfo, {
            children: [/*#__PURE__*/_jsx(ChatContainerHeaderLabel, {
              numberOfLines: 1,
              ellipsizeMode: "tail",
              children: currentRoom?.title || currentRoom?.name
            }), /*#__PURE__*/_jsx(View, {
              children: composing ? /*#__PURE__*/_jsx(Composing, {
                usersTyping: currentRoom?.composingList
              }) : config?.disableUserCount ? undefined : /*#__PURE__*/_jsx(ChatContainerHeaderLabel, {
                style: styles.subLabel,
                children: /*#__PURE__*/_jsx(Text, {
                  children: `${currentRoom?.usersCnt} users`
                })
              })
            })]
          })]
        })]
      }), !config?.disableChatInfo?.disableRoomMenu ? /*#__PURE__*/_jsx(View, {
        style: styles.rightContainer,
        children: /*#__PURE__*/_jsx(RoomMenu, {
          handleLeaveClick: handleLeaveClick
        })
      }) : /*#__PURE__*/_jsx(View, {
        style: styles.rightContainer
      })]
    }), config?.chatHeaderAdditional?.enabled && config.chatHeaderAdditional.element()]
  });
};
const styles = StyleSheet.create({
  subLabel: {
    color: '#8C8C8C',
    fontSize: 14
  },
  menuButton: {
    padding: 8,
    borderRadius: 16,
    backgroundColor: 'transparent'
  },
  leftContainer: {
    alignItems: 'flex-start',
    width: '15%'
  },
  rightContainer: {
    alignItems: 'flex-end',
    width: '15%'
  }
});
export default ChatHeader;
//# sourceMappingURL=ChatHeader.js.map