"use strict";

import React, { useState, useMemo } from 'react';
import Button from '../../styled/Button';
import { AddPhotoIcon } from '../../../assets/icons';
import { useXmppClient } from '../../../context/xmppProvider';
import { CloseButton, GroupContainer, ModalBackground, ModalContainer, ModalTitle } from '../styledModalComponents';
import { addRoomViaApi, setCurrentRoom, updateRoom } from '../../../roomStore/roomsSlice';
import InputWithLabel from '../../styled/StyledInput';
import { uploadFile } from '../../../networking/api-requests/auth.api';
import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
import { Text, Alert, Linking } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
import { postRoom } from '../../../networking/api-requests/rooms.api';
import { useAppDispatch, useAppSelector } from '../../../hooks/hooks';
import { useChatSettingState } from '../../../hooks/useChatSettingState';
import { useToast } from '../../../context/ToastContext';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const NewChatModal = ({
  // Some call sites mount `<NewChatModal />` with no props (e.g. the
  // empty-state in ChatRoom when roomsList is empty). Default to a noop
  // so the Close/Cancel buttons don't throw "handleClose is not a
  // function".
  handleCloseModal: handleClose = () => {}
}) => {
  const config = useAppSelector(state => state.chatSettingStore.config);
  const dispatch = useAppDispatch();
  const {
    client
  } = useXmppClient();
  const {
    user
  } = useChatSettingState();
  const {
    showToast
  } = useToast();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState('0');
  const [roomName, setRoomName] = useState('');
  const [roomDescription, setRoomDescription] = useState('');
  const [chatType, setChatType] = useState({
    name: 'Public',
    id: 'public'
  });
  const [profileImage, setProfileImage] = useState(null);
  const [errors, setErrors] = useState({
    name: '',
    description: ''
  });
  const [selectedUsers, setSelectedUsers] = useState([]);
  const isValid = useMemo(
  // () => roomName.length >= 3 && roomDescription.length >= 5,
  () => roomName.length >= 3, [roomName, roomDescription]);
  const validateRoomName = name => {
    if (name.trim().length < 3) {
      return 'Room name must be at least 3 characters.';
    }
    return '';
  };

  // const validateRoomDescription = (description: string) => {
  //   if (description.trim().length < 5) {
  //     return 'Room description must be at least 5 characters.';
  //   }
  //   return '';
  // };

  const handleRoomNameChange = e => {
    const name = e;
    setRoomName(name);
    setErrors(prevErrors => ({
      ...prevErrors,
      name: validateRoomName(name)
    }));
  };
  const handleRoomDescriptionChange = e => {
    const description = e;
    setRoomDescription(description);
    setErrors(prevErrors => ({
      ...prevErrors
      // description: validateRoomDescription(description),
    }));
  };
  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => {
    handleClose();
    setActiveTab('0');
    setIsModalOpen(false);
    setRoomName('');
    setSelectedUsers([]);
  };
  const onUpload = async () => {
    try {
      const {
        status
      } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') {
        Alert.alert('Permission required', 'Photo library permission is needed to select images.', [{
          text: 'Cancel',
          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) return;
      const asset = result.assets[0];
      const originalName = asset.uri.split('/').pop();
      const fileObject = {
        uri: asset.uri,
        type: asset.mimeType || 'image/jpeg',
        name: originalName || `profile_${Date.now()}.jpg`
      };
      setProfileImage(fileObject);
    } catch (error) {
      console.error('Image selection failed:', error);
      Alert.alert('Error', 'Failed to select image');
    }
  };
  const onRemoveClick = async () => {
    setProfileImage(null);
  };
  const handleRoomCreation = async (newChat, usersArrayLength) => {
    try {
      const normalizedChat = createRoomFromApi(newChat, config?.xmppSettings?.conference, usersArrayLength);
      if (!normalizedChat || !client) return;
      dispatch(addRoomViaApi({
        room: normalizedChat,
        xmpp: client
      }));
      dispatch(setCurrentRoom({
        roomJID: normalizedChat.jid
      }));
      showToast({
        id: Date.now().toString(),
        title: 'Success',
        message: 'Room created successfully',
        type: 'success'
      });
    } catch (error) {
      console.error('Error handling room creation:', error);
      showToast({
        id: Date.now().toString(),
        title: 'Error',
        message: 'Failed to create room',
        type: 'error'
      });
    }
  };
  const handleCreateRoom = async () => {
    setLoading(true);
    if (isValid) {
      let location;
      if (profileImage && typeof profileImage === 'object' && 'uri' in profileImage) {
        try {
          const mediaData = new FormData();
          mediaData.append('files', profileImage);
          const uploadResult = await uploadFile(mediaData);
          location = uploadResult?.data?.results?.[0]?.location;
        } catch (error) {
          console.error('Failed to upload image:', error);
          setLoading(false);
          return;
        }
      }
      if (config?.newArch) {
        const namesArray = selectedUsers.map(user => user.xmppUsername);
        const newChat = await postRoom({
          title: roomName,
          description: roomDescription && roomDescription !== '' ? roomDescription : 'No description',
          picture: location || '',
          type: chatType.id || 'public',
          members: namesArray
        });
        handleRoomCreation(newChat, namesArray.length);
        handleCloseModal();
      } else {
        try {
          const newChatJid = await client?.createRoomStanza(roomName, roomDescription && roomDescription !== '' ? roomDescription : 'No description');
          const jidStr = typeof newChatJid === 'string' ? newChatJid : '';
          client?.getRoomsStanza();
          dispatch(setCurrentRoom({
            roomJID: jidStr
          }));
          if (location) {
            client?.setRoomImageStanza(jidStr, location, 'icon', 'none');
            dispatch(updateRoom({
              jid: jidStr,
              updates: {
                icon: location
              }
            }));
          }
          showToast({
            id: Date.now().toString(),
            title: 'Success',
            message: 'Room created successfully',
            type: 'success'
          });
          handleCloseModal();
        } catch (error) {
          console.error('Failed to create room:', error);
          showToast({
            id: Date.now().toString(),
            title: 'Error',
            message: 'Failed to create room',
            type: 'error'
          });
        }
      }
      setIsModalOpen(false);
      setErrors({
        name: '',
        description: ''
      });
      setProfileImage(null);
      setRoomName('');
      setRoomDescription('');
      setLoading(false);
    }
  };
  return /*#__PURE__*/_jsx(_Fragment, {
    children: /*#__PURE__*/_jsx(ModalBackground
    // visible={isModalOpen}
    // transparent={true}
    // animationType="fade"
    // onRequestClose={handleCloseModal}
    , {
      children: /*#__PURE__*/_jsxs(ModalContainer, {
        children: [/*#__PURE__*/_jsx(CloseButton, {
          onPress: handleCloseModal,
          children: /*#__PURE__*/_jsx(Text, {
            style: {
              fontSize: 24,
              padding: 5
            },
            children: "\xD7"
          })
        }), /*#__PURE__*/_jsx(ModalTitle, {
          children: "Create New Chat"
        }), /*#__PURE__*/_jsx(ProfileImagePlaceholder, {
          size: 120,
          upload: {
            active: true,
            onUpload
          },
          remove: {
            enabled: true,
            onRemoveClick
          },
          placeholderIcon: /*#__PURE__*/_jsx(AddPhotoIcon, {
            color: "#0052CD"
          }),
          icon: profileImage && typeof profileImage === 'object' && 'uri' in profileImage ? {
            uri: profileImage.uri
          } : profileImage,
          disableOverlay: !profileImage,
          role: "user"
        }), /*#__PURE__*/_jsxs(GroupContainer, {
          style: {
            flexDirection: 'column',
            position: 'relative',
            width: '100%'
          },
          children: [/*#__PURE__*/_jsx(InputWithLabel, {
            color: "#F5F7F9",
            id: "roomName",
            value: roomName,
            onChangeText: handleRoomNameChange,
            placeholder: "Enter Room Name",
            helperText: errors.name,
            error: !!errors.name
          }), /*#__PURE__*/_jsx(InputWithLabel, {
            color: "#F5F7F9",
            id: "roomDescription",
            value: roomDescription,
            onChangeText: handleRoomDescriptionChange,
            placeholder: "Enter Description",
            helperText: errors.description,
            error: !!errors.description
          })]
        }), /*#__PURE__*/_jsxs(GroupContainer, {
          children: [/*#__PURE__*/_jsx(Button, {
            onPress: handleCreateRoom,
            text: 'Create',
            style: {
              width: '100%'
            },
            unstyled: true,
            variant: "filled",
            disabled: !isValid,
            color: "#fff"
          }), /*#__PURE__*/_jsx(Button, {
            onPress: handleCloseModal,
            text: 'Cancel',
            style: {
              width: '100%'
            },
            unstyled: true,
            variant: "outlined",
            color: "#0052CD"
          })]
        })]
      })
    })
  });
};
export default NewChatModal;
//# sourceMappingURL=NewChatModal.js.map