"use strict";

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getActiveRoom } from '../../../roomStore';
import { ActionButton, CloseButton, GroupContainer, ModalBackground, ModalContainer } from '../styledModalComponents';
import Button from '../../styled/Button';
import UsersList from '../../UsersList/UsersList';
import Loader from '../../styled/Loader';
import { postAddRoomMember } from '../../../networking/api-requests/rooms.api';
import { useToast } from '../../../context/ToastContext';
import { updateRoom } from '../../../roomStore/roomsSlice';
import { Text } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const SelectUsersModal = () => {
  const {
    showToast
  } = useToast();
  const dispatch = useDispatch();
  const [loading, setIsLoading] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedUsers, setSelectedUsers] = useState([]);
  const activeRoom = useSelector(state => getActiveRoom(state));
  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedUsers([]);
  };
  const handleAdd = async () => {
    setIsLoading(true);
    const existingXmppUsernames = activeRoom?.members?.map(member => member.xmppUsername);
    const usersArray = selectedUsers.filter(user => !existingXmppUsernames?.includes(user.xmppUsername)).map(user => user.xmppUsername);
    try {
      const newMembers = await postAddRoomMember({
        chatName: activeRoom?.jid?.split('@')[0] || '',
        members: usersArray
      });
      dispatch(updateRoom({
        jid: activeRoom?.jid || '',
        updates: {
          members: [...newMembers, ...(activeRoom?.members || [])],
          usersCnt: (activeRoom?.members?.length || 0) + newMembers.length
        }
      }));
      showToast({
        id: Date.now().toString(),
        title: 'Success!',
        message: 'Room created succusfully!',
        type: 'success',
        duration: 3000
      });
    } catch (error) {
      console.error('Error adding users:', error);
      setIsLoading(false);
    }
    handleCloseModal();
    setIsLoading(false);
  };
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(ActionButton, {
      variant: "filled",
      unstyled: true,
      onPress: handleOpenModal,
      children: "Add more Users"
    }), isModalOpen && /*#__PURE__*/_jsx(ModalBackground, {
      children: /*#__PURE__*/_jsxs(ModalContainer, {
        children: [/*#__PURE__*/_jsxs(CloseButton, {
          onPress: handleCloseModal,
          children: [/*#__PURE__*/_jsx(Text, {
            style: {
              fontSize: 24
            },
            children: "\xD7"
          }), "\xD7"]
        }), /*#__PURE__*/_jsx(GroupContainer, {
          style: {
            flexDirection: 'column',
            position: 'relative',
            width: '100%',
            minHeight: 400
          },
          children: /*#__PURE__*/_jsx(UsersList, {
            selectedUsers: selectedUsers,
            setSelectedUsers: setSelectedUsers,
            style: {
              minWidth: '100%',
              width: '100%',
              maxHeight: '340px'
            },
            headerElement: false
          })
        }), /*#__PURE__*/_jsxs(GroupContainer, {
          children: [/*#__PURE__*/_jsx(Button, {
            onPress: handleCloseModal,
            text: "Cancel",
            style: {
              width: '100%'
            },
            unstyled: true,
            variant: "outlined"
          }), loading ? /*#__PURE__*/_jsx(Loader, {}) : /*#__PURE__*/_jsx(Button, {
            onPress: handleAdd,
            text: "Add",
            style: {
              width: '100%'
            },
            unstyled: true,
            variant: "filled"
          })]
        })]
      })
    })]
  });
};
export default SelectUsersModal;
//# sourceMappingURL=SelectUsersModal.js.map