"use strict";

import React from 'react';
import { ModalContainer, CloseButton, ModalTitle, GroupContainer } from '../styledModalComponents';
import InputWithLabel from '../../styled/StyledInput';
import Select from '../../MainComponents/Select';
import Button from '../../styled/Button';
import UsersList from '../../UsersList/UsersList';
import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
import { AddPhotoIcon } from '../../../assets/icons';
import { Text } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const ModalContent = ({
  activeTab,
  roomName,
  roomDescription,
  chatType,
  profileImage,
  setActiveTab,
  handleRoomNameChange,
  setChatType,
  setProfileImage,
  selectedUsers,
  setSelectedUsers,
  handleCreateRoom,
  handleCloseModal,
  errors,
  setErrors,
  options
}) => {
  return /*#__PURE__*/_jsxs(ModalContainer, {
    children: [/*#__PURE__*/_jsx(CloseButton, {
      onPress: handleCloseModal,
      children: /*#__PURE__*/_jsx(Text, {
        style: {
          fontSize: 24
        },
        children: "\xD7"
      })
    }), activeTab === '0' && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(ModalTitle, {
        children: "Create New Chat"
      }), /*#__PURE__*/_jsx(ProfileImagePlaceholder, {
        size: 120,
        upload: {
          active: true,
          onUpload: setProfileImage
        },
        remove: {
          enabled: true,
          onRemoveClick: () => setProfileImage(null)
        },
        placeholderIcon: /*#__PURE__*/_jsx(AddPhotoIcon, {}),
        icon: profileImage,
        disableOverlay: !profileImage,
        role: "user"
      }), /*#__PURE__*/_jsxs(GroupContainer, {
        style: {
          flexDirection: 'column',
          position: 'relative',
          width: '100%'
        },
        children: [/*#__PURE__*/_jsx(InputWithLabel, {
          style: {
            flex: 1
          },
          id: "roomName",
          value: roomName,
          onChange: handleRoomNameChange,
          placeholder: "Enter Room Name",
          helperText: errors.name,
          error: !!errors.name
        }), /*#__PURE__*/_jsx(Select, {
          options: options,
          onSelect: setChatType,
          selectedValue: chatType,
          placeholder: 'Select room type'
        })]
      }), chatType.id === 'group' && /*#__PURE__*/_jsx(Button, {
        onPress: () => setActiveTab('1'),
        style: {
          width: '100%'
        },
        variant: "outlined",
        unstyled: true,
        children: "Add users"
      }), /*#__PURE__*/_jsxs(GroupContainer, {
        children: [/*#__PURE__*/_jsx(Button, {
          onPress: handleCloseModal,
          text: 'Cancel',
          style: {
            width: '100%'
          },
          unstyled: true,
          variant: "outlined"
        }), /*#__PURE__*/_jsx(Button, {
          onPress: handleCreateRoom,
          text: 'Create',
          style: {
            width: '100%'
          },
          variant: "filled"
        })]
      })]
    }), activeTab === '1' && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(ModalTitle, {
        children: "Select users to add to Chat"
      }), /*#__PURE__*/_jsx(UsersList, {
        selectedUsers: selectedUsers,
        setSelectedUsers: setSelectedUsers,
        style: {
          minHeight: '400px',
          minWidth: '100%',
          width: '100%'
        }
      }), /*#__PURE__*/_jsx(Button, {
        onPress: () => setActiveTab('0'),
        style: {
          width: '100%'
        },
        variant: "outlined",
        unstyled: true,
        children: "Back to creation"
      })]
    })]
  });
};
export default ModalContent;
//# sourceMappingURL=ModalContent.js.map