"use strict";

import React, { useEffect, useMemo, useState } from 'react';
import { CenterContainer, UserInfo, UserName, UserStatus, ModalContainerFullScreen, Label, BorderedContainer, LabelData, Divider } from '../styledModalComponents';
import { Pressable, View, Text, ScrollView, Alert, Linking } from 'react-native';
import ModalHeaderComponent from '../ModalHeaderComponent';
import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
import { useDispatch, useSelector } from 'react-redux';
import { getActiveRoom } from '../../../roomStore';
import { uploadFile } from '../../../networking/api-requests/auth.api';
import { useXmppClient } from '../../../context/xmppProvider';
import { updateRoom } from '../../../roomStore/roomsSlice';
import * as ImagePicker from 'expo-image-picker';
import Loader from '../../styled/Loader';
import Button from '../../styled/Button';
import { DeleteIcon, MoreIcon, QrIcon } from '../../../assets/icons';
import { useChatSettingState } from '../../../hooks/useChatSettingState';
import { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
import DropdownMenu from '../../DropdownMenu/DropdownMenu';
import SelectUsersModal from '../SelectUsersModal/SelectUsersModal';
import { useToast } from '../../../context/ToastContext';
import DeleteChatModal from './DeleteChatModal';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const ChatProfileModal = ({
  handleCloseModal
}) => {
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const {
    showToast
  } = useToast();
  const chatMenuOptions = useMemo(() => [{
    label: 'Delete chat',
    icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
    onClick: () => {
      setIsModalOpen(true);
    },
    styles: {
      color: 'red'
    }
  }], []);
  const dispatch = useDispatch();
  const {
    client
  } = useXmppClient();
  const {
    user: stateUser,
    config
  } = useChatSettingState();
  const activeRoom = useSelector(state => getActiveRoom(state));

  // Pull live member list from the MUC when the modal opens — REST
  // hydration only fills the *count* (item.participants /
  // item.members.length); the actual roster comes from a `getRoomMembers`
  // IQ which onGetMembers in stanzaHandlers parses into `roomMembers`.
  useEffect(() => {
    if (client && activeRoom?.jid) {
      try {
        client.getRoomMembersStanza?.(activeRoom.jid);
      } catch {
        /* non-fatal */
      }
    }
  }, [client, activeRoom?.jid]);
  const onUpload = async () => {
    let loadingSet = false;
    try {
      setLoading(true);
      loadingSet = true;

      // expo-image-picker owns the permission prompt internally and
      // returns a `granted` flag. No separate react-native-permissions
      // round-trip needed.
      const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (!perm.granted) {
        Alert.alert('Permission required', 'Photo library permission is needed to select images.', [{
          text: 'Cancel',
          onPress: () => setLoading(false),
          style: 'cancel'
        }, {
          text: 'Open Settings',
          onPress: () => Linking.openSettings()
        }]);
        return;
      }
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        aspect: [1, 1],
        quality: 0.8
      });
      if (result.canceled || !result.assets?.[0]) {
        return;
      }
      const asset = result.assets[0];
      const originalName = asset.fileName || asset.uri.split('/').pop();
      const fileObject = {
        uri: asset.uri,
        type: asset.mimeType || 'image/jpeg',
        name: originalName || `profile_${Date.now()}.jpg`
      };
      const mediaData = new FormData();
      mediaData.append('files', fileObject);
      const uploadResult = await uploadFile(mediaData);
      const location = uploadResult?.data?.results?.[0]?.location;
      if (location) {
        client?.setRoomImageStanza(activeRoom?.jid || '', location, 'icon', 'none');
        dispatch(updateRoom({
          jid: activeRoom?.jid || '',
          updates: {
            icon: location
          }
        }));
        showToast({
          id: Date.now().toString(),
          title: 'Success',
          message: 'Room image updated successfully',
          type: 'success'
        });
      }
    } catch (error) {
      if (error?.code === 'E_PICKER_CANCELLED' || error?.code === 'E_NO_CAMERA_PERMISSION') {
        console.log('User cancelled image selection');
        return;
      }
      console.error('File upload failed or location is missing:', error);
      showToast({
        id: Date.now().toString(),
        title: 'Error',
        message: 'Failed to upload image',
        type: 'error'
      });
    } finally {
      if (loadingSet) {
        setLoading(false);
      }
    }
  };
  const handleDeleteUser = async userId => {
    try {
      await deleteRoomMember({
        roomId: activeRoom?.jid?.split('@')[0] || '',
        members: [userId]
      });
      dispatch(updateRoom({
        jid: activeRoom?.jid || '',
        updates: {
          roomMembers: activeRoom?.roomMembers?.filter(user => user.xmppUsername !== userId)
        }
      }));
      showToast({
        id: Date.now().toString(),
        title: 'Success',
        message: `${userId} has been removed from the room.`,
        type: 'success'
      });
    } catch (error) {
      console.error('Failed to delete user:', error);
      showToast({
        id: Date.now().toString(),
        title: 'Error',
        message: 'Failed to delete user.',
        type: 'error'
      });
    }
  };
  const onRemoveClick = async () => {
    client?.setRoomImageStanza(activeRoom?.jid || '', '', 'icon', 'none');
    dispatch(updateRoom({
      jid: activeRoom?.jid || '',
      updates: {
        icon: null
      }
    }));
  };
  const handleUserAvatarClick = user => {
    dispatch(setActiveModal(MODAL_TYPES.PROFILE));
    dispatch(setSelectedUser({
      id: user._id,
      firstName: user.firstName,
      lastName: user.lastName,
      name: `${user.firstName} ${user.lastName}`,
      userJID: user?.xmppUsername,
      token: '',
      refreshToken: ''
    }));
  };
  const menuOptions = useMemo(() => userId => [{
    label: 'Appoint as an admin',
    icon: null,
    onClick: () => {
      dispatch(setActiveModal(MODAL_TYPES.PROFILE));
      console.log('Profile clicked');
    }
  }, {
    label: 'Unban',
    icon: null,
    onClick: () => {
      dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
      console.log('Settings clicked');
    }
  }, {
    label: 'Delete',
    icon: null,
    onClick: e => {
      e?.preventDefault();
      handleDeleteUser(userId);
    }
  }], []);
  useEffect(() => {
    if (!activeRoom) {
      dispatch(setActiveModal(undefined));
    }
  }, [activeRoom, dispatch]);
  if (!activeRoom) {
    return null;
  }
  return /*#__PURE__*/_jsxs(ModalContainerFullScreen, {
    style: {
      position: 'relative'
    },
    children: [/*#__PURE__*/_jsx(ModalHeaderComponent, {
      handleCloseModal: handleCloseModal,
      headerTitle: 'Chat Profile',
      rightMenu: /*#__PURE__*/_jsxs(_Fragment, {
        children: [activeRoom?.type === 'public' && /*#__PURE__*/_jsx(Button, {
          EndIcon: /*#__PURE__*/_jsx(QrIcon, {}),
          onPress: () => setVisible(true)
        }), activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/_jsx(DropdownMenu, {
          position: "right",
          options: chatMenuOptions,
          openButton: /*#__PURE__*/_jsx(Button, {
            style: {
              padding: 8,
              height: 40
            },
            EndIcon: /*#__PURE__*/_jsx(MoreIcon, {}),
            unstyled: true
          })
        })]
      })
    }), /*#__PURE__*/_jsxs(CenterContainer, {
      children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
        name: activeRoom.title || activeRoom.name,
        icon: activeRoom.icon
        // Two gates control whether the icon is editable:
        //   1. role — only non-participants could edit before.
        //   2. NEW: `disableChatInfo.disableIconEdit` — hard kill from
        //      config so a consumer can make the icon read-only for
        //      everyone (e.g. branded rooms, patient-facing apps).
        // Both must allow it for the picker/remove affordances to show.
        ,
        upload: {
          onUpload,
          active: !config?.disableChatInfo?.disableIconEdit && activeRoom?.role !== 'participant'
        },
        remove: {
          enabled: !config?.disableChatInfo?.disableIconEdit,
          onRemoveClick
        },
        role: activeRoom?.role,
        size: 128
      }), /*#__PURE__*/_jsxs(UserInfo, {
        children: [/*#__PURE__*/_jsx(UserName, {
          children: activeRoom.title || activeRoom.name
        }), /*#__PURE__*/_jsxs(UserStatus, {
          children: [activeRoom.usersCnt, ' ', activeRoom.usersCnt > 1 ? 'members' : 'member']
        })]
      }), activeRoom.role === 'moderator' && activeRoom.type === 'group' && /*#__PURE__*/_jsx(_Fragment, {
        children: /*#__PURE__*/_jsx(SelectUsersModal, {})
      }), !config?.disableChatInfo?.disableDescription && /*#__PURE__*/_jsxs(BorderedContainer, {
        children: [/*#__PURE__*/_jsx(LabelData, {
          children: "Description"
        }), /*#__PURE__*/_jsx(Label, {
          children: activeRoom?.description || '—'
        })]
      }), !config?.disableChatInfo?.disableType && /*#__PURE__*/_jsxs(BorderedContainer, {
        children: [/*#__PURE__*/_jsx(LabelData, {
          children: "Chat type"
        }), /*#__PURE__*/_jsx(Label, {
          children: activeRoom.type || '—'
        })]
      }), !config?.disableChatInfo?.hideMembers && /*#__PURE__*/_jsx(BorderedContainer, {
        style: {
          paddingHorizontal: 16,
          paddingVertical: 8
        },
        children: loading ? /*#__PURE__*/_jsx(Loader, {}) : (activeRoom?.roomMembers?.length ?? 0) === 0 ? /*#__PURE__*/_jsx(Label, {
          style: {
            opacity: 0.6,
            textAlign: 'center',
            paddingVertical: 8
          },
          children: "Member list unavailable"
        }) : /*#__PURE__*/_jsx(ScrollView, {
          style: {
            maxHeight: 400
          },
          showsVerticalScrollIndicator: true,
          nestedScrollEnabled: true,
          children: activeRoom?.roomMembers?.map((user, index) => /*#__PURE__*/_jsxs(View, {
            style: {
              flexDirection: 'column',
              alignItems: 'flex-start'
            },
            children: [/*#__PURE__*/_jsxs(View, {
              style: {
                flexDirection: 'row',
                justifyContent: 'flex-start',
                paddingHorizontal: 8,
                paddingVertical: 0,
                alignItems: 'center',
                width: '100%'
              },
              children: [/*#__PURE__*/_jsxs(Pressable, {
                style: {
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'flex-start',
                  gap: 16
                }
                // `disableChatInfo.disableMemberTap` blocks the
                // tap entirely so the user-profile popup never
                // opens. `disableMemberProfileActions` only hid
                // the action buttons INSIDE that popup, leaving
                // the popup itself to open on tap — this gate
                // closes the door. Customer-reported #16.
                ,
                onPress: config?.disableChatInfo?.disableMemberTap ? undefined : () => handleUserAvatarClick(user),
                disabled: !!config?.disableChatInfo?.disableMemberTap,
                children: [/*#__PURE__*/_jsx(ProfileImagePlaceholder, {
                  name: `${user.firstName} ${user.lastName}`,
                  size: 40
                }), /*#__PURE__*/_jsxs(View, {
                  style: {
                    flexDirection: 'column',
                    gap: 2,
                    alignItems: 'flex-start',
                    justifyContent: 'center'
                  },
                  children: [/*#__PURE__*/_jsxs(Label, {
                    style: {
                      fontSize: 16,
                      fontWeight: 600
                    },
                    children: [user.firstName, " ", user.lastName]
                  }), user.last_active && /*#__PURE__*/_jsx(LabelData, {
                    children: new Date(user.last_active * 1000).toLocaleString()
                  })]
                })]
              }), user.role && user.role !== 'none' && /*#__PURE__*/_jsx(Text, {
                style: {
                  backgroundColor: user.ban_status !== 'banned' ? '#F3F6FC' : '#FFEBEE',
                  color: user.ban_status !== 'banned' ? '#0052CD' : '#F44336',
                  padding: 5,
                  borderRadius: 16,
                  fontSize: 12
                },
                children: user.role
              }), stateUser.xmppUsername !== user.xmppUsername && activeRoom.role === 'moderator' && activeRoom.type !== 'private' && /*#__PURE__*/_jsx(DropdownMenu, {
                options: menuOptions(user.xmppUsername),
                openButton: /*#__PURE__*/_jsx(Button, {
                  onPress: () => {},
                  children: /*#__PURE__*/_jsx(Text, {
                    children: "More Options"
                  })
                }),
                onClose: () => console.log('Dropdown closed')
              })]
            }), index < (activeRoom?.roomMembers?.length || 0) - 1 && /*#__PURE__*/_jsx(Divider, {})]
          }, user.xmppUsername))
        })
      })]
    }), /*#__PURE__*/_jsx(DeleteChatModal, {
      isModalOpen: isModalOpen,
      setIsModalOpen: setIsModalOpen
    })]
  });
};
export default ChatProfileModal;
//# sourceMappingURL=ChatProfileModal.js.map