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 { connect } from "react-redux";
import { Keyboard, TextInput, View, ImageBackground, TouchableOpacity, Dimensions } from "react-native";
import { Icon } from "@rneui/themed";
import { withSafeAreaInsets } from "react-native-safe-area-context";
import _ from "lodash";
import { getApiError } from "../session";
import { getShadowStyle } from "../helper";
import { TEXT_BLUEGREY, TEXT_DARKEST, BG_GREY } from "../colours";
import { Spinner } from "./Spinner";
import ImageUploader from "./ImageUploader";
import { reactionActions } from "../apis";
const SCREEN_HEIGHT = Dimensions.get("window").height;
class CommentReply extends Component {
  constructor(props) {
    super(props);
    _defineProperty(this, "onUploadStarted", () => {
      this.setState({
        uploadingCommentImage: true
      });
      setTimeout(() => {
        if (!this.props.noScroll) {
          var _this$props$scrollVie;
          (_this$props$scrollVie = this.props.scrollView) === null || _this$props$scrollVie === void 0 || (_this$props$scrollVie = _this$props$scrollVie.current) === null || _this$props$scrollVie === void 0 || _this$props$scrollVie.scrollToEnd({
            animated: true
          });
        }
      }, 500);
    });
    _defineProperty(this, "onUploadSuccess", uri => {
      this.setState({
        uploadingCommentImage: false,
        commentImageInput: uri.replace("/general/", "/general1400/")
      });
    });
    _defineProperty(this, "onUploadFailed", () => {
      this.setState({
        uploadingCommentImage: false,
        commentImageInput: null
      });
    });
    this.state = {
      commentImageInput: "",
      commentInput: "",
      uploadingCommentImage: false,
      commentsLoading: true,
      addingComment: false
    };
    this.replyInputRef = /*#__PURE__*/React.createRef();
  }
  componentDidMount() {
    if (this.props.commentSection && this.props.commentSection.current) {
      this.setState({
        commentsLoading: this.props.commentSection.current.isLoading()
      });
    }
  }
  focusInput() {
    this.replyInputRef.current.focus();
  }
  loadingStarted() {
    this.setState({
      commentsLoading: true
    });
  }
  loadingCompleted() {
    this.setState({
      commentsLoading: false
    });
  }
  shouldShowImageInput() {
    return this.state.uploadingCommentImage || !_.isEmpty(this.state.commentImageInput);
  }
  addComment() {
    setTimeout(() => {
      if (!this.props.noScroll) {
        var _this$props$scrollVie2;
        (_this$props$scrollVie2 = this.props.scrollView) === null || _this$props$scrollVie2 === void 0 || (_this$props$scrollVie2 = _this$props$scrollVie2.current) === null || _this$props$scrollVie2 === void 0 || _this$props$scrollVie2.scrollToEnd({
          animated: true
        });
      }
    }, 500);
    const text = this.state.commentInput;
    const image = this.state.commentImageInput;
    this.setState({
      addingComment: true,
      commentInput: "",
      commentImageInput: ""
    });
    Keyboard.dismiss();
    if (this.props.commentSection) {
      var _this$props$commentSe;
      (_this$props$commentSe = this.props.commentSection) === null || _this$props$commentSe === void 0 || (_this$props$commentSe = _this$props$commentSe.current) === null || _this$props$commentSe === void 0 || _this$props$commentSe.startedAddingComment();
    }
    reactionActions.addComment(this.props.entityId, this.props.entityType, this.props.entityName, this.props.site, text, image, this.props.threadId).then(res => {
      if (this.props.commentSection) {
        var _this$props$commentSe2;
        (_this$props$commentSe2 = this.props.commentSection) === null || _this$props$commentSe2 === void 0 || (_this$props$commentSe2 = _this$props$commentSe2.current) === null || _this$props$commentSe2 === void 0 || _this$props$commentSe2.commentAdded(res.data);
      }
      this.setState({
        addingComment: false
      });
      setTimeout(() => {
        if (!this.props.noScroll) {
          var _this$props$scrollVie3;
          (_this$props$scrollVie3 = this.props.scrollView) === null || _this$props$scrollVie3 === void 0 || (_this$props$scrollVie3 = _this$props$scrollVie3.current) === null || _this$props$scrollVie3 === void 0 || _this$props$scrollVie3.scrollToEnd({
            animated: true
          });
        }
      }, 500);
    }).catch(err => {
      console.log(getApiError(err));
    });
  }
  removeImage() {
    this.setState({
      commentImageInput: null
    });
  }
  showUploadMenu() {
    if (this.state.uploadingCommentImage || !_.isEmpty(this.state.commentImageInput)) {
      return;
    }
    this.commentImageUploader.showUploadMenu();
  }
  renderImageAttachment() {
    if (_.isEmpty(this.state.commentImageInput) && !this.state.uploadingCommentImage) {
      return null;
    }
    if (this.state.uploadingCommentImage) {
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.accessoryImage, styles.accessoryImageBorder, {
          borderWidth: 1,
          borderColor: BG_GREY
        }]
      }, /*#__PURE__*/React.createElement(Spinner, null));
    }
    return /*#__PURE__*/React.createElement(ImageBackground, {
      style: styles.accessoryImage,
      imageStyle: styles.accessoryImageBorder,
      source: {
        uri: this.state.commentImageInput
      }
    }, /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.accessoryImageClose,
      onPress: this.removeImage.bind(this),
      hitSlop: {
        top: 8,
        right: 8,
        bottom: 8,
        left: 8
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "remove",
      type: "font-awesome",
      iconStyle: styles.accessoryImageCloseIcon,
      style: styles.accessoryImageCloseIconContainer
    })));
  }
  renderImageUploader() {
    return /*#__PURE__*/React.createElement(ImageUploader, {
      ref: ref => this.commentImageUploader = ref,
      onUploadStarted: this.onUploadStarted,
      onUploadSuccess: this.onUploadSuccess,
      onUploadFailed: this.onUploadFailed,
      onLibrarySelected: this.onUploadSuccess,
      quality: 0.8,
      allowsEditing: false,
      fileName: "commentImage",
      popupTitle: "Add Image",
      userId: this.props.user.uid,
      hideLibrary: true
    });
  }
  render() {
    var _this$props$insets;
    if (_.includes(this.props.user.hidden, "addComment")) {
      return null;
    }
    if (this.state.commentsLoading) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.inputContainer, getShadowStyle(), {
        paddingBottom: 8 + (((_this$props$insets = this.props.insets) === null || _this$props$insets === void 0 ? void 0 : _this$props$insets.bottom) ?? 0)
      }, this.props.style]
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.input, {
        marginRight: _.isEmpty(this.state.commentInput) && _.isEmpty(this.state.commentImageInput) ? 40 : 80
      }]
    }, /*#__PURE__*/React.createElement(TextInput, {
      maxFontSizeMultiplier: 1.2,
      ref: this.replyInputRef,
      placeholder: "Enter your comment here",
      value: this.state.commentInput,
      onFocus: () => {
        if (!this.props.noScroll) {
          var _this$props$scrollVie4;
          (_this$props$scrollVie4 = this.props.scrollView) === null || _this$props$scrollVie4 === void 0 || (_this$props$scrollVie4 = _this$props$scrollVie4.current) === null || _this$props$scrollVie4 === void 0 || _this$props$scrollVie4.scrollToEnd({
            animated: true
          });
        }
      },
      onChangeText: value => {
        if (!this.props.noScroll) {
          var _this$props$scrollVie5;
          (_this$props$scrollVie5 = this.props.scrollView) === null || _this$props$scrollVie5 === void 0 || (_this$props$scrollVie5 = _this$props$scrollVie5.current) === null || _this$props$scrollVie5 === void 0 || _this$props$scrollVie5.scrollToEnd({
            animated: false
          });
        }
        this.setState({
          commentInput: value
        });
      },
      style: styles.inputText,
      autoCapitalize: "sentences",
      multiline: true,
      autoCorrect: true,
      autoGrow: true
    })), (!_.isEmpty(this.state.commentInput) || !_.isEmpty(this.state.commentImageInput)) && !this.state.addingComment && /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.addComment.bind(this),
      style: [styles.sendContainer, {
        right: 4,
        padding: 4,
        width: 40,
        height: 40
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "paper-plane",
      type: "font-awesome",
      iconStyle: [styles.send, {
        width: 40
      }]
    })), /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.showUploadMenu.bind(this),
      style: [styles.sendContainer, {
        right: _.isEmpty(this.state.commentInput) && _.isEmpty(this.state.commentImageInput) ? 4 : 44,
        padding: 4,
        width: 40,
        height: 40
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "picture-o",
      type: "font-awesome",
      iconStyle: [styles.send, {
        width: 40
      }]
    })), this.renderImageAttachment(), this.renderImageUploader());
  }
}
const styles = {
  accessoryImage: {
    marginTop: 8,
    width: 60,
    height: 60
  },
  accessoryImageBorder: {
    borderRadius: 2
  },
  accessoryImageClose: {
    width: 14,
    height: 14,
    borderRadius: 7,
    position: "absolute",
    top: -7,
    right: -7,
    backgroundColor: TEXT_BLUEGREY
  },
  accessoryImageCloseIconContainer: {
    width: 14,
    height: 14,
    alignItems: "center",
    justifyContent: "center"
  },
  accessoryImageCloseIcon: {
    fontSize: 10,
    color: "#fff",
    textAlign: "center"
  },
  inputContainer: {
    backgroundColor: "#fff",
    paddingVertical: 8,
    paddingHorizontal: 8,
    paddingBottom: 8,
    // bottom inset added dynamically via props
    flexGrow: 1
  },
  inputText: {
    color: TEXT_DARKEST,
    fontSize: 14,
    fontFamily: "sf-medium"
  },
  input: {
    fontSize: 14,
    color: TEXT_DARKEST,
    fontFamily: "sf-medium",
    margin: 0,
    backgroundColor: BG_GREY,
    borderRadius: 5,
    padding: 8,
    maxHeight: SCREEN_HEIGHT / 3
  },
  sendContainer: {
    position: "absolute",
    top: 8,
    right: 8,
    height: 30,
    width: 30,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#fff"
  },
  send: {
    color: TEXT_BLUEGREY,
    fontSize: 24,
    textAlign: "center"
  }
};
const mapStateToProps = state => {
  const {
    user
  } = state;
  return {
    user
  };
};
const commentReply = connect(mapStateToProps, {}, null, {
  forwardRef: true
})(withSafeAreaInsets(CommentReply));
export { commentReply as CommentReply };
//# sourceMappingURL=CommentReply.js.map