function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { Component } from "react";
import { View, Image, ImageBackground, TouchableOpacity, KeyboardAvoidingView, Platform, ScrollView, Alert, TextInput } from "react-native";
import { GiftedChat, Bubble, MessageText, Send, InputToolbar } from "react-native-gifted-chat";
import { connect } from "react-redux";
import _ from "lodash";
import moment from "moment";
import { Icon } from "@rneui/themed";
import { withSafeAreaInsets } from "react-native-safe-area-context";
import { Spinner } from "./Spinner";
import { ProfilePic } from "./ProfilePic";
import PlussChatTime from "./PlussChatTime";
import { PDFPopup } from "./PDFPopup";
import { Attachment } from "./Attachment";
import PlussChatMessage from "./PlussChatMessage";
import { Text } from ".";
import { ConfirmPopup } from "./ConfirmPopup";
import { TEXT_DARK, LINEGREY, TEXT_DARKEST, getMainBrandingColourFromState, getLightBrandingColourFromState, BG_GREY, TEXT_BLUEGREY } from "../colours";
import { getEnabledTabsFromState, get1400, getThumb300, imageExists, isVideo, getImageSource, getFileName } from "../helper";
import Config, { Services } from "../config";
import ImageUploader from "./ImageUploader";
import ImageUploadProgress from "./ImageUploadProgress";
import { ImagePopup } from "./ImagePopup";
import { VideoPopup } from "./VideoPopup";
const IMAGE_SIZE_SMALL = 55;
const IMAGE_SIZE_LARGE = 110;
const IMAGES_PER_ROW = 4;
const IMAGE_MARGIN = 2;
const IMAGE_PREVIEW_AREA_HEIGHT = 105;
const IMAGE_PREVIEW_SIZE = IMAGE_PREVIEW_AREA_HEIGHT - 25;
class PlussChat extends Component {
  constructor(props) {
    var _this$props$insets;
    super(props);
    _defineProperty(this, "onPressEvent", event => {
      Services.navigation.navigate("eventDetail", {
        event
      });
    });
    _defineProperty(this, "onPressAttachment", attachment => {
      switch (attachment.Type) {
        case "Event":
          Services.navigation.navigate("eventDetail", {
            event: attachment
          });
          break;
        case "Place":
          Services.navigation.navigate("placeDetail", {
            place: attachment
          });
          break;
        default:
          return;
      }
    });
    _defineProperty(this, "hasImagesAttached", (imagesToUpload = null) => {
      return !_.isEmpty(imagesToUpload || this.state.imagesToUpload);
    });
    _defineProperty(this, "hasImagesReady", (imagesToUpload = null) => {
      const upload = imagesToUpload || this.state.imagesToUpload;
      return this.hasImagesAttached(upload) && upload.every(i => !i.uploading && i.thumbNailExists);
    });
    _defineProperty(this, "waitForThumbnails", () => {
      if (this.checkThumb) return;
      this.checkThumb = setInterval(async () => {
        const imagesToUpload = [];
        await Promise.all(this.state.imagesToUpload.map(image => {
          return new Promise(async resolve => {
            const newImage = {
              ...image
            };
            imagesToUpload.push(newImage);
            if (newImage.url && !newImage.thumbNailExists) {
              newImage.uploading = false;
              newImage.allowRetry = false;
              newImage.thumbNailExists = await imageExists(newImage.thumbNailUrl);
              resolve(newImage.thumbNailExists);
            }
            resolve(true);
          });
        }));
        const thumbnailsExist = imagesToUpload.every(image => !image.url || image.thumbNailExists);
        if (thumbnailsExist) {
          clearInterval(this.checkThumb);
          this.checkThumb = null;
          this.setState({
            imagesToUpload
          });
        }
      }, 2000);
    });
    _defineProperty(this, "onOpenAttachment", a => {
      this.setState({
        selectedPDF: a
      });
    });
    _defineProperty(this, "onCloseAttachment", () => {
      this.setState({
        selectedPDF: null
      });
    });
    _defineProperty(this, "onFocusInput", () => {
      this.setState({
        keyboardOpen: true
      });
      if (this.props.keyboardOpen) {
        this.props.keyboardOpen();
      }
    });
    _defineProperty(this, "onBlurInput", () => {
      this.setState({
        keyboardOpen: false
      });
    });
    _defineProperty(this, "onUploadStarted", (uploadUri, imageUri) => {
      const imagesToUpload = [...this.state.imagesToUpload, {
        uploading: true,
        uploadProgress: "0%",
        uploadUri,
        imageUri,
        allowRetry: true
      }];
      this.setState({
        imagesToUpload
      });
    });
    _defineProperty(this, "onUploadProgress", progress => {
      const imagesToUpload = [...this.state.imagesToUpload];
      imagesToUpload.map(img => {
        if (img.uploadUri === progress.uri) {
          img.uploadProgress = progress.percentage;
          img.uploading = true;
          img.allowRetry = true;
        }
      });
      this.setState({
        imagesToUpload
      });
    });
    _defineProperty(this, "onUploadSuccess", async (uri, uploadUri) => {
      const imagesToUpload = [...this.state.imagesToUpload];
      imagesToUpload.map(img => {
        if (img.uploadUri === uploadUri && img.uploading) {
          img.url = uri.replace("/general/", "/general1400/");
          img.thumbNailExists = false;
          img.thumbNailUrl = getThumb300(img.url);
          img.allowRetry = true;
        }
      });
      this.setState({
        imagesToUpload
      }, () => this.waitForThumbnails());
    });
    _defineProperty(this, "onUploadFailed", uploadUri => {
      const imagesToUpload = [...this.state.imagesToUpload];
      imagesToUpload.map(img => {
        if (img.uploadUri === uploadUri) {
          img.uploading = true; // Requried for retry
          img.uploadProgress = "";
          img.allowRetry = true;
        }
      });
      this.setState({
        imagesToUpload
      });
    });
    _defineProperty(this, "onLibrarySelected", uri => {
      const imagesToUpload = [...this.state.imagesToUpload, {
        uploading: false,
        allowRetry: false,
        url: get1400(uri),
        thumbNailExists: true,
        thumbNailUrl: getThumb300(uri)
      }];
      this.setState({
        imagesToUpload
      });
    });
    _defineProperty(this, "onPressImage", (images, selected) => {
      this.setState({
        imagePopupSource: images,
        imagePopupIndex: images.indexOf(selected),
        imagePopupOpen: true
      });
    });
    _defineProperty(this, "onReply", message => {
      this.setState({
        replyingTo: message
      });
    });
    _defineProperty(this, "onDelete", message => {
      // Only proceed if delete handler is provided
      if (!this.props.onDeleteMessage) {
        return;
      }

      // Only allow deletion of own messages
      if (message.user._id !== this.props.user.uid) {
        return;
      }
      this.setState({
        showDeleteMessageConfirm: true,
        messageToDelete: message
      });
    });
    _defineProperty(this, "onCancelDeleteMessage", () => {
      this.setState({
        showDeleteMessageConfirm: false,
        messageToDelete: null
      });
    });
    _defineProperty(this, "onConfirmDeleteMessage", async () => {
      const {
        messageToDelete
      } = this.state;
      if (!messageToDelete) return;
      this.setState({
        showDeleteMessageConfirm: false
      });
      try {
        // Call the parent's delete handler if provided
        if (this.props.onDeleteMessage) {
          await this.props.onDeleteMessage(messageToDelete);
        }
        this.setState({
          messageToDelete: null
        });
      } catch (error) {
        // Handle error gracefully if parent handler fails
        console.log("onConfirmDeleteMessage error", error);
        // Error is already handled by parent component
        this.setState({
          messageToDelete: null
        });
      }
    });
    _defineProperty(this, "onRemoveImage", url => {
      const imagesToUpload = this.state.imagesToUpload.filter(image => image.url !== url);
      this.setState({
        imagesToUpload
      });
    });
    _defineProperty(this, "toggleFullscreenVideo", url => {
      if (typeof url !== "string") url = "";
      this.setState({
        showFullscreenVideo: url.length > 0,
        currentVideoUrl: url
      });
    });
    const bottomInset = ((_this$props$insets = this.props.insets) === null || _this$props$insets === void 0 ? void 0 : _this$props$insets.bottom) ?? 0;
    const isSingleTab = this.props.tabCount === 1 && bottomInset > 0;
    this.MIN_COMPOSER_HEIGHT = Platform.select({
      ios: isSingleTab ? 42 : 33,
      android: 41
    });
    this.state = {
      currentUser: {
        _id: this.props.user.uid,
        name: this.props.user.displayName,
        avatar: !_.isUndefined(this.props.user.profilePic) && !_.isEmpty(this.props.user.profilePic) ? this.props.user.profilePic : Config.env.tinyChatDefault
      },
      messages: [],
      imagePopupSource: [],
      imagePopupIndex: 0,
      imagePopupOpen: false,
      imagesToUpload: [],
      showFullscreenVideo: false,
      currentVideoUrl: "",
      showDeleteMessageConfirm: false,
      messageToDelete: null,
      composerHeight: this.MIN_COMPOSER_HEIGHT
    };
    this.checkThumb = null;
  }
  UNSAFE_componentWillMount() {
    this.updateMessages(this.props);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    // Only update if messages actually changed
    if (nextProps.messages !== this.props.messages) {
      this.updateMessages(nextProps);
    }
  }
  updateMessages(props) {
    // Only update if messages actually changed
    if (!_.isUndefined(props.messages) && !_.isEqual(props.messages, this.state.messages)) {
      this.setState({
        messages: props.messages
      });
    }
  }

  /***
   *
   * Messaging functionality
   */
  onSend(messages = []) {
    // if (this.chatKey) {
    //     this.sendMessage(messages[0]);
    // }
  }
  showUploadMenu() {
    this.imageUploader.showUploadMenu();
  }
  closeGallery() {
    this.setState({
      imagePopupSource: [],
      imagePopupIndex: 0,
      imagePopupOpen: false
    });
  }
  sendMessages(messages) {
    if (this.hasImagesAttached()) {
      // Don't allow send if attached images aren't ready
      if (!this.hasImagesReady()) return;
      messages[0].image = this.state.imagesToUpload.map(image => image.url);
    }
    if (_.isEmpty(messages[0].text)) {
      messages[0].text = "";
    }
    if (!messages[0].text && !messages[0].image) return;
    if (this.state.replyingTo) {
      messages[0].replyingTo = this.state.replyingTo;
    }
    this.props.onSend(messages);
    this.setState({
      imagesToUpload: [],
      replyingTo: null
    });
  }

  /**
   *
   * Render Functions
   */
  renderBubble(bubbleProps) {
    const wrapperStyle = {};
    if (!_.isEmpty(bubbleProps.currentMessage.text) && !_.isEmpty(bubbleProps.currentMessage.image)) {
      wrapperStyle.paddingTop = 8;
      wrapperStyle.paddingBottom = 16;
      wrapperStyle.minWidth = 142; // 110 image width + 16 padding either side
    }
    if (!_.isEmpty(bubbleProps.currentMessage.attachments)) {
      wrapperStyle.paddingTop = 8;
      wrapperStyle.paddingBottom = 16;
      wrapperStyle.paddingHorizontal = 16;
    }
    return /*#__PURE__*/React.createElement(Bubble, _extends({}, bubbleProps, {
      renderMessageImage: () => null,
      isCustomViewBottom: true,
      wrapperStyle: {
        left: {
          backgroundColor: LINEGREY,
          borderRadius: 25,
          ...wrapperStyle
        },
        right: {
          backgroundColor: this.props.colourBrandingLight,
          borderRadius: 25,
          ...wrapperStyle
        }
      },
      containerToNextStyle: {
        left: {
          borderBottomLeftRadius: 5
        },
        right: {
          borderBottomRightRadius: 5
        }
      },
      containerToPreviousStyle: {
        left: {
          borderTopLeftRadius: 5
        },
        right: {
          borderTopRightRadius: 5
        }
      }
    }));
  }
  renderMessage(props) {
    return /*#__PURE__*/React.createElement(PlussChatMessage, _extends({
      key: props.RowId,
      colourBrandingMain: this.props.colourBrandingMain,
      onPressReply: () => {
        this.onReply(props.currentMessage);
      },
      onPressDelete: this.props.onDeleteMessage ? () => {
        this.onDelete(props.currentMessage);
      } : null
    }, props));
  }
  renderMessageText(messageTextProps) {
    // If message is deleted, show placeholder text
    const props = messageTextProps.currentMessage.deleted ? {
      ...messageTextProps,
      currentMessage: {
        ...messageTextProps.currentMessage,
        text: "[Message deleted]"
      }
    } : messageTextProps;
    return /*#__PURE__*/React.createElement(MessageText, _extends({}, props, {
      textStyle: {
        left: {
          fontFamily: "sf-regular",
          fontSize: 16,
          color: TEXT_DARKEST,
          marginTop: 10,
          marginBottom: 10,
          marginLeft: 15,
          marginRight: 15
        },
        right: {
          fontFamily: "sf-regular",
          fontSize: 16,
          color: this.props.colourBrandingMain,
          marginTop: 10,
          marginBottom: 10,
          marginLeft: 15,
          marginRight: 15
        }
      },
      linkStyle: {
        left: {
          color: TEXT_DARKEST
        },
        right: {
          color: this.props.colourBrandingMain
        }
      },
      textProps: {
        selectable: true
      }
    }));
  }
  renderTime() {
    return null;
  }
  renderDay(dayProps) {
    return /*#__PURE__*/React.createElement(PlussChatTime, _extends({}, dayProps, {
      textStyle: {
        fontFamily: "sf-semibold",
        color: TEXT_DARK,
        fontSize: 12
      }
    }));
  }
  renderCustomView({
    currentMessage,
    position
  }) {
    // Don't show images or attachments for deleted messages
    if (currentMessage.deleted) {
      return null;
    }
    if (currentMessage.image) {
      const images = typeof currentMessage.image === "string" ? [currentMessage.image] : currentMessage.image;
      const containerWidth = (() => {
        if (images.length === 0) return 0;
        if (images.length === 1) return IMAGE_SIZE_LARGE;
        if (images.length <= IMAGES_PER_ROW) return (IMAGE_SIZE_SMALL + IMAGE_MARGIN) * images.length;
        return (IMAGE_SIZE_SMALL + IMAGE_MARGIN) * IMAGES_PER_ROW;
      })();
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.imagesContainer, {
          width: containerWidth,
          paddingVertical: currentMessage.text ? 0 : 20
        }]
      }, images.map(img => {
        const thumb = getThumb300(img);
        if (isVideo(img)) {
          return /*#__PURE__*/React.createElement(TouchableOpacity, {
            key: thumb,
            onPress: this.toggleFullscreenVideo.bind(this, img)
          }, /*#__PURE__*/React.createElement(ImageBackground, {
            style: images.length > 1 ? styles.messageImageSmall : styles.messageImageLarge,
            source: {
              uri: thumb
            }
          }, /*#__PURE__*/React.createElement(View, {
            style: styles.imagePlayContainer
          }, /*#__PURE__*/React.createElement(Icon, {
            name: "play",
            type: "font-awesome",
            iconStyle: styles.imageControlIcon
          }))));
        }
        return /*#__PURE__*/React.createElement(TouchableOpacity, {
          key: thumb,
          onPress: () => this.onPressImage(images, img)
        }, /*#__PURE__*/React.createElement(Image, {
          source: {
            uri: thumb
          },
          style: images.length > 1 ? styles.messageImageSmall : styles.messageImageLarge
        }));
      }));
    }
    if (!_.isEmpty(currentMessage.attachments)) {
      return /*#__PURE__*/React.createElement(View, null, currentMessage.attachments.map((url, i) => {
        return /*#__PURE__*/React.createElement(Attachment, {
          onPress: () => {
            this.onOpenAttachment(url);
          },
          key: i,
          title: getFileName(url)
        });
      }));
    }
    if (currentMessage.event) {
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.onPressEvent.bind(this, currentMessage.event)
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.eventContainer[position]
      }, /*#__PURE__*/React.createElement(Image, {
        style: [styles.eventImage, styles.eventImageMargin[position]],
        source: {
          uri: currentMessage.event.Thumbnail
        }
      }), /*#__PURE__*/React.createElement(View, {
        style: styles.eventInfo
      }, /*#__PURE__*/React.createElement(Text, {
        numberOfLines: 3,
        style: [styles.eventTitle, styles.eventInfoAlign[position], {
          color: this.props.colourBrandingMain
        }]
      }, currentMessage.event.Title), /*#__PURE__*/React.createElement(Text, {
        style: [styles.eventDate, styles.eventInfoAlign[position], {
          color: this.props.colourBrandingMain
        }]
      }, moment.utc(currentMessage.event.StartTime).local().format("ddd D MMM")))));
    }
    if (currentMessage.attachment) {
      return /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.onPressAttachment.bind(this, currentMessage.attachment)
      }, /*#__PURE__*/React.createElement(View, {
        style: styles.eventContainer[position]
      }, /*#__PURE__*/React.createElement(Image, {
        style: [styles.eventImage, styles.eventImageMargin[position]],
        source: {
          uri: currentMessage.attachment.Thumbnail
        }
      }), /*#__PURE__*/React.createElement(View, {
        style: styles.eventInfo
      }, /*#__PURE__*/React.createElement(Text, {
        numberOfLines: 3,
        style: [styles.eventTitle, styles.eventInfoAlign[position], {
          color: this.props.colourBrandingMain
        }]
      }, currentMessage.attachment.Title), currentMessage.attachment.StartTime && /*#__PURE__*/React.createElement(Text, {
        style: [styles.eventDate, styles.eventInfoAlign[position], {
          color: this.props.colourBrandingMain
        }]
      }, moment.utc(currentMessage.attachment.StartTime).local().format("ddd D MMM")))));
    }
    return null;
  }
  renderSend(props) {
    const buttonTopOffset = this.state.replyingTo ? 46 : 4;
    const showSendButton = !_.isEmpty(props.text) || this.hasImagesReady(props.imagesToUpload);
    return /*#__PURE__*/React.createElement(View, {
      style: {
        position: "absolute",
        top: buttonTopOffset,
        right: 8,
        flexDirection: "row",
        alignItems: "center"
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.showUploadMenu.bind(this),
      style: [styles.sendContainer, {
        right: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 0 : this.MIN_COMPOSER_HEIGHT,
        width: this.MIN_COMPOSER_HEIGHT,
        height: this.MIN_COMPOSER_HEIGHT
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "picture-o",
      type: "font-awesome",
      iconStyle: [styles.send, {
        width: this.MIN_COMPOSER_HEIGHT
      }]
    })), showSendButton && /*#__PURE__*/React.createElement(Send, _extends({}, props, {
      alwaysShowSend: true,
      onSend: props.onSend,
      text: props.text || " ",
      containerStyle: [styles.sendContainer, {
        width: this.MIN_COMPOSER_HEIGHT,
        height: this.MIN_COMPOSER_HEIGHT
      }]
    }), /*#__PURE__*/React.createElement(Icon, {
      name: "paper-plane",
      type: "font-awesome",
      iconStyle: [styles.send, {
        width: this.MIN_COMPOSER_HEIGHT
      }]
    })));
  }
  renderAccessory(props) {
    const hasAttachment = this.hasImagesAttached(props.imagesToUpload);
    if (!hasAttachment) {
      return null;
    }
    return /*#__PURE__*/React.createElement(ScrollView, {
      horizontal: true,
      style: styles.uploadImagesContainer
    }, props.imagesToUpload.map(image => {
      if (image.uploading) {
        return /*#__PURE__*/React.createElement(ImageUploadProgress, {
          key: image.uploadUri,
          uploader: this.imageUploader,
          image: image,
          color: this.props.colourBrandingMain,
          style: {
            width: IMAGE_PREVIEW_SIZE,
            marginRight: 10
          },
          progressTextStyle: {
            fontSize: 10
          }
        });
      }
      const isVideoUrl = isVideo(image.url);
      return /*#__PURE__*/React.createElement(View, {
        key: image.url,
        style: styles.accessoryImageContainer
      }, /*#__PURE__*/React.createElement(ImageBackground, {
        style: styles.accessoryImage,
        imageStyle: styles.accessoryImageBorder,
        source: getImageSource(image.thumbNailExists ? image.thumbNailUrl : image.url)
      }, isVideoUrl && /*#__PURE__*/React.createElement(View, {
        style: styles.imagePlayContainer
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: this.toggleFullscreenVideo.bind(this, image.url)
      }, /*#__PURE__*/React.createElement(Icon, {
        name: "play",
        type: "font-awesome",
        iconStyle: styles.imageControlIcon
      })))), /*#__PURE__*/React.createElement(TouchableOpacity, {
        style: styles.previewItemRemoveButton,
        onPress: () => this.onRemoveImage(image.url),
        hitSlop: {
          top: 8,
          right: 8,
          bottom: 8,
          left: 8
        }
      }, /*#__PURE__*/React.createElement(View, {
        style: [styles.previewItemRemoveContainer, {
          backgroundColor: this.props.colourBrandingMain
        }]
      }, /*#__PURE__*/React.createElement(Icon, {
        name: "times",
        type: "font-awesome",
        iconStyle: styles.previewItemRemoveIcon
      }))));
    }));
  }
  renderInputToolbar(props) {
    const hasAttachment = this.hasImagesAttached(props.imagesToUpload);
    return /*#__PURE__*/React.createElement(InputToolbar, _extends({}, props, {
      containerStyle: styles.inputContainer,
      renderComposer: this.renderComposer.bind(this),
      renderAccessory: hasAttachment ? this.renderAccessory.bind(this) : null,
      accessoryStyle: hasAttachment && styles.accessory
    }));
  }
  renderFooter() {
    // if (this.state.keyboardOpen) {
    //     return null;
    // }
    // fixes an issue where there's no gap between bottom message and reply container
    return /*#__PURE__*/React.createElement(View, {
      style: {
        height: 10
      }
    });
  }
  renderLoading() {
    return /*#__PURE__*/React.createElement(View, {
      style: {
        marginTop: 15,
        justifyContent: "center",
        alignContent: "center"
      }
    }, /*#__PURE__*/React.createElement(Spinner, {
      size: "small",
      color: this.props.colourBrandingMain
    }));
  }
  renderAvatar(props) {
    return /*#__PURE__*/React.createElement(View, {
      style: {
        marginRight: 2
      }
    }, /*#__PURE__*/React.createElement(ProfilePic, {
      ProfilePic: props.currentMessage.user.avatar,
      Diameter: 28
    }));
  }
  renderComposer(props) {
    var _this$state$replyingT, _this$state$replyingT2;
    return /*#__PURE__*/React.createElement(View, {
      style: {
        width: "100%"
      }
    }, this.state.replyingTo && /*#__PURE__*/React.createElement(View, {
      style: styles.replyingTo
    }, /*#__PURE__*/React.createElement(Text, {
      type: "body"
    }, "Replying to", " ", _.isEmpty((_this$state$replyingT = this.state.replyingTo) === null || _this$state$replyingT === void 0 || (_this$state$replyingT = _this$state$replyingT.user) === null || _this$state$replyingT === void 0 ? void 0 : _this$state$replyingT.name) ? "message" : (_this$state$replyingT2 = this.state.replyingTo) === null || _this$state$replyingT2 === void 0 || (_this$state$replyingT2 = _this$state$replyingT2.user) === null || _this$state$replyingT2 === void 0 ? void 0 : _this$state$replyingT2.name), /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.replyingRemoveButton,
      onPress: () => this.onReply(null),
      hitSlop: {
        top: 8,
        right: 8,
        bottom: 8,
        left: 8
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.replyingRemoveContainer, {
        backgroundColor: this.props.colourBrandingMain
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "times",
      type: "font-awesome",
      iconStyle: styles.replyingRemoveIcon
    })))), /*#__PURE__*/React.createElement(View, {
      style: {
        flexDirection: "row",
        alignItems: "flex-end",
        width: "100%",
        paddingBottom: 8
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.input, {
        flex: 1,
        marginRight: _.isEmpty(props.text) && !this.hasImagesReady(props.imagesToUpload) ? 16 + this.MIN_COMPOSER_HEIGHT : 2 * (this.MIN_COMPOSER_HEIGHT + 8),
        paddingHorizontal: 12,
        paddingVertical: Platform.select({
          ios: 8,
          android: 6
        })
      }]
    }, /*#__PURE__*/React.createElement(TextInput, {
      maxFontSizeMultiplier: 1.2,
      placeholder: "Type a message...",
      multiline: true,
      value: props.text,
      onChangeText: props.onTextChanged,
      style: [styles.inputText, {
        lineHeight: 20,
        minHeight: this.MIN_COMPOSER_HEIGHT - 16,
        maxHeight: 100
      }],
      onFocus: this.onFocusInput.bind(this),
      onBlur: this.onBlurInput.bind(this),
      placeholderTextColor: "#999"
    }))));
  }

  /***
   * Main Render
   */
  renderChat() {
    const minInputToolbarHeight = this.MIN_COMPOSER_HEIGHT + 32 + (this.state.replyingTo ? 38 : 0) + (this.hasImagesAttached() ? IMAGE_PREVIEW_AREA_HEIGHT : 0);
    return /*#__PURE__*/React.createElement(GiftedChat, {
      isKeyboardInternallyHandled: false,
      alwaysShowSend: false,
      keyboardShouldPersistTaps: "never",
      renderAvatarOnTop: true,
      minInputToolbarHeight: minInputToolbarHeight,
      minComposerHeight: this.MIN_COMPOSER_HEIGHT,
      bottomOffset: 0,
      onSend: this.sendMessages.bind(this),
      messages: this.state.messages,
      user: this.state.currentUser,
      renderBubble: this.renderBubble.bind(this),
      renderMessage: this.renderMessage.bind(this),
      renderMessageText: this.renderMessageText.bind(this),
      renderTime: this.renderTime.bind(this),
      renderDay: this.renderDay.bind(this),
      renderCustomView: this.renderCustomView.bind(this),
      renderSend: this.renderSend.bind(this),
      renderInputToolbar: this.renderInputToolbar.bind(this),
      renderFooter: this.renderFooter.bind(this),
      renderLoading: this.renderLoading.bind(this),
      renderAvatar: this.renderAvatar.bind(this),
      imagesToUpload: this.state.imagesToUpload
    });
  }
  renderImageUploader() {
    return /*#__PURE__*/React.createElement(ImageUploader, {
      ref: ref => this.imageUploader = ref,
      onUploadStarted: this.onUploadStarted,
      onUploadProgress: this.onUploadProgress,
      onUploadSuccess: this.onUploadSuccess,
      onUploadFailed: this.onUploadFailed,
      onLibrarySelected: this.onLibrarySelected,
      quality: 0.8,
      allowsEditing: false,
      fileName: "imageInput",
      popupTitle: "Add Image",
      userId: this.props.user.uid,
      multiple: true,
      allowVideo: true
    });
  }
  renderImagePopup() {
    const {
      imagePopupOpen,
      imagePopupSource,
      imagePopupIndex
    } = this.state;
    return /*#__PURE__*/React.createElement(ImagePopup, {
      visible: imagePopupOpen,
      images: imagePopupSource,
      index: imagePopupIndex,
      onClose: this.closeGallery.bind(this)
    });
  }
  renderVideoPlayerPopup() {
    const {
      showFullscreenVideo,
      currentVideoUrl
    } = this.state;
    if (!currentVideoUrl) return;
    return /*#__PURE__*/React.createElement(VideoPopup, {
      uri: currentVideoUrl,
      visible: showFullscreenVideo,
      onClose: this.toggleFullscreenVideo
    });
  }
  renderPDF() {
    if (_.isEmpty(this.state.selectedPDF)) {
      return null;
    }
    return /*#__PURE__*/React.createElement(PDFPopup, {
      source: this.state.selectedPDF,
      onClose: this.onCloseAttachment,
      title: getFileName(this.state.selectedPDF),
      pdfCount: 1
    });
  }
  renderDeleteConfirmPopup() {
    return /*#__PURE__*/React.createElement(ConfirmPopup, {
      visible: this.state.showDeleteMessageConfirm,
      onConfirm: this.onConfirmDeleteMessage,
      onCancel: this.onCancelDeleteMessage,
      text: "Are you sure you want to delete this message?",
      yesText: "Delete",
      noText: "Cancel"
    });
  }
  render() {
    return /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
      behavior: "padding",
      style: styles.chatContainer
    }, this.renderChat(), this.renderImageUploader(), this.renderImagePopup(), this.renderVideoPlayerPopup(), this.renderPDF(), this.renderDeleteConfirmPopup());
  }
}
const styles = {
  chatContainer: {
    flex: 1,
    justifyContent: "center"
  },
  eventContainer: {
    left: {
      paddingTop: 5,
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 5,
      flexDirection: "row"
    },
    right: {
      paddingTop: 5,
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 5,
      flexDirection: "row-reverse"
    }
  },
  eventImage: {
    width: 80,
    height: 80,
    resizeMode: "cover",
    borderRadius: 2
  },
  eventImageMargin: {
    right: {
      marginLeft: 15
    },
    left: {
      marginRight: 15
    }
  },
  eventInfo: {
    minHeight: 80,
    width: 150
  },
  eventTitle: {
    fontSize: 12,
    fontFamily: "sf-bold",
    backgroundColor: "rgba(255,255,255,0)"
  },
  eventInfoAlign: {
    left: {
      textAlign: "left"
    },
    right: {
      textAlign: "right"
    }
  },
  messageImageLarge: {
    width: IMAGE_SIZE_LARGE,
    height: IMAGE_SIZE_LARGE,
    borderRadius: 2,
    alignSelf: "center"
  },
  messageImageSmall: {
    width: IMAGE_SIZE_SMALL,
    height: IMAGE_SIZE_SMALL,
    borderRadius: 2,
    alignSelf: "center",
    marginRight: IMAGE_MARGIN,
    marginBottom: IMAGE_MARGIN
  },
  eventDate: {
    fontSize: 12,
    fontFamily: "sf-regular",
    backgroundColor: "rgba(255,255,255,0)"
  },
  inputContainer: {
    backgroundColor: "#fff",
    paddingVertical: 8,
    paddingHorizontal: 8
  },
  inputText: {
    color: TEXT_DARKEST,
    fontSize: 14,
    fontFamily: "sf-medium"
  },
  input: {
    margin: 0,
    backgroundColor: BG_GREY,
    borderRadius: 5,
    flex: 1
  },
  composerContainer: {
    flex: 1
  },
  composerInputWrapper: {
    flex: 1,
    flexDirection: "row"
  },
  replyingTo: {
    minHeight: 30,
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: 1,
    borderBottomColor: LINEGREY,
    marginBottom: 8
  },
  replyingRemoveButton: {
    marginLeft: 10
  },
  replyingRemoveContainer: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    width: 20,
    height: 20,
    borderWidth: 2,
    borderColor: "#fff"
  },
  replyingRemoveIcon: {
    fontSize: 10,
    color: "#fff",
    marginBottom: 1
  },
  sendContainer: {
    position: "absolute",
    top: 0,
    right: 0,
    height: 30,
    width: 30,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#fff"
  },
  send: {
    fontSize: 15,
    color: TEXT_BLUEGREY,
    fontSize: 24,
    textAlign: "center"
  },
  accessory: {
    height: IMAGE_PREVIEW_AREA_HEIGHT,
    borderTopWidth: 1,
    borderTopColor: LINEGREY,
    paddingTop: 8,
    marginTop: 8
  },
  accessoryImageContainer: {
    paddingRight: 8,
    paddingTop: 8,
    marginRight: 5
  },
  accessoryImage: {
    width: IMAGE_PREVIEW_SIZE,
    height: IMAGE_PREVIEW_SIZE
  },
  accessoryImageBorder: {
    borderRadius: 2
  },
  settingDropDownOpen: {
    height: "auto"
  },
  imagesContainer: {
    marginLeft: 10,
    marginRight: 10,
    flexDirection: "row",
    flexWrap: "wrap"
  },
  uploadImagesContainer: {
    flexDirection: "row",
    overflow: "visible"
  },
  previewItemRemoveButton: {
    position: "absolute",
    top: 0,
    right: 0
  },
  previewItemRemoveContainer: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    width: 20,
    height: 20,
    borderWidth: 2,
    borderColor: "#fff"
  },
  previewItemRemoveIcon: {
    fontSize: 10,
    color: "#fff",
    marginBottom: 1
  },
  imagePlayContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: "center",
    justifyContent: "center"
  },
  imageControlIcon: {
    color: "#fff",
    fontSize: 20,
    textShadowColor: "rgba(0,0,0,0.3)",
    textShadowOffset: {
      width: 2,
      height: 2
    }
  }
};
const mapStateToProps = state => {
  return {
    user: state.user,
    colourBrandingMain: getMainBrandingColourFromState(state),
    colourBrandingLight: getLightBrandingColourFromState(state),
    tabCount: getEnabledTabsFromState(state).length
  };
};
export default connect(mapStateToProps, {})(withSafeAreaInsets(PlussChat));
//# sourceMappingURL=PlussChat.js.map