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, TouchableOpacity, Image, StyleSheet } from "react-native";
import { Text } from "./Text";
import _ from "lodash";
import moment from "moment";
import { connect } from "react-redux";
import { Icon } from "@rneui/themed";
import { getPluralS, getThumb300, get1400, getSiteSettingFromState, getFirstName, getPluralOptions } from "../helper";
import { getMainBrandingColourFromState, TEXT_DARKEST, BG_GREY, TEXT_LIGHT, LINEGREY } from "../colours";
import { reactionActions, notificationActions } from "../apis";
import { blockUser, unblockUser } from "../actions";
import { ConfirmPopup } from "./ConfirmPopup";
import { ProfilePic } from "./ProfilePic";
import { ImagePopup } from "./ImagePopup";
import { InlineButton } from "./InlineButton";
import { Spinner } from "./Spinner";
import { Services } from "../config";
class CommentSection extends Component {
  constructor(props) {
    super(props);
    _defineProperty(this, "onPressDeleteComment", c => {
      this.setState({
        commentToDelete: c
      });
    });
    _defineProperty(this, "onPressConfirmDelete", () => {
      reactionActions.removeComment(this.state.commentToDelete.Id).then(res => {
        console.log("deleted");
      });
      const newComments = _.filter(this.state.comments, c => {
        return c.Id !== this.state.commentToDelete.Id;
      });
      this.setState({
        comments: newComments,
        commentToDelete: null
      });
    });
    _defineProperty(this, "onPressCancelDelete", () => {
      this.setState({
        commentToDelete: null
      });
    });
    _defineProperty(this, "onPressReportComment", c => {
      this.setState({
        commentToReport: c
      });
    });
    _defineProperty(this, "onPressBlockUser", c => {
      this.setState({
        commentToBlock: c
      });
    });
    _defineProperty(this, "onPressConfirmBlock", () => {
      const userId = this.state.commentToBlock.UserId;
      this.props.blockUser(userId);
      this.setState({
        commentToBlock: null
      });
    });
    _defineProperty(this, "onPressCancelBlock", () => {
      this.setState({
        commentToBlock: null
      });
    });
    _defineProperty(this, "onPressUnblockUser", c => {
      this.setState({
        commentToUnblock: c
      });
    });
    _defineProperty(this, "onPressConfirmUnblock", () => {
      const userId = this.state.commentToUnblock.UserId;
      this.props.unblockUser(userId);
      this.setState({
        commentToUnblock: null
      });
    });
    _defineProperty(this, "onPressCancelUnblock", () => {
      this.setState({
        commentToUnblock: null
      });
    });
    _defineProperty(this, "onPressConfirmReport", () => {
      const commentId = this.state.commentToReport.Id;
      this.setState({
        reportLoading: true,
        commentToReport: null
      }, () => {
        reactionActions.reportComment(commentId).then(res => {
          this.setState({
            commentReportedStatus: "success",
            reportLoading: false
          });
        }).catch(error => {
          console.log("reportComment", error);
          this.setState({
            commentReportedStatus: "fail",
            reportLoading: false
          });
        });
      });
    });
    _defineProperty(this, "onPressCancelReport", () => {
      this.setState({
        commentToReport: null
      });
    });
    _defineProperty(this, "onPressConfirmReportStatus", () => {
      this.setState({
        commentReportedStatus: null
      });
    });
    _defineProperty(this, "onOpenThread", comment => {
      Services.navigation.navigate("thread", {
        ...this.props,
        threadId: comment.Id
      });
    });
    _defineProperty(this, "onMute", () => {
      const {
        entityType,
        entityId
      } = this.props;
      this.setState({
        processing: true
      }, async () => {
        try {
          const {
            data
          } = await notificationActions.muteEntity(entityType, entityId);
          // console.log('onMute', data);
          const muteExpiry = moment(data.Expiry);
          this.setState({
            muteExpiry,
            processing: false
          });
        } catch (error) {
          console.error("onMute", error);
          this.setState({
            processing: false
          });
        }
      });
    });
    _defineProperty(this, "onUnmute", () => {
      const {
        entityType,
        entityId
      } = this.props;
      this.setState({
        processing: true
      }, async () => {
        try {
          const {
            data
          } = await notificationActions.unmuteEntity(entityType, entityId);
          // console.log('onUnmute', data);
          this.setState({
            muteExpiry: null,
            processing: false
          });
        } catch (error) {
          console.error("onUnmute", error);
          this.setState({
            processing: false
          });
        }
      });
    });
    _defineProperty(this, "isMuted", () => {
      const {
        muteExpiry
      } = this.state;
      return muteExpiry && moment() <= muteExpiry;
    });
    _defineProperty(this, "getMuteRemaining", () => {
      const {
        muteExpiry
      } = this.state;
      const actual = muteExpiry ? moment.duration(muteExpiry.diff(moment())).asHours() : 0;
      return Math.abs(Math.ceil(actual));
    });
    _defineProperty(this, "getNotificationSate", () => {
      const {
        processing
      } = this.state;
      const {
        entityType,
        entityId,
        notificationsForComments
      } = this.props;
      if (processing || !notificationsForComments) return;
      this.setState({
        processing: true
      }, async () => {
        try {
          const {
            data
          } = await notificationActions.getEntityNotificationSetting(entityType, entityId);
          // console.log('getNotificationSate', data);
          const muteExpiry = data ? moment(data.Expiry) : null;
          this.setState({
            muteExpiry,
            muteLoaded: true,
            processing: false
          });
        } catch (error) {
          console.error("getNotificationSate", error);
          this.setState({
            processing: false
          });
        }
      });
    });
    _defineProperty(this, "isLoading", () => {
      return this.state.commentsLoading;
    });
    _defineProperty(this, "isUserBlocked", c => {
      return _.includes(this.props.blockedUsers, c.UserId);
    });
    _defineProperty(this, "canBlockComment", c => {
      return this.props.user.uid !== c.UserId;
    });
    _defineProperty(this, "renderReplyText", (c, isUserBlocked) => {
      if (this.props.threadId || this.props.hideReplyButton) {
        return null;
      }
      const threadComments = _.filter(this.state.comments, innerC => {
        return innerC.ParentId === c.Id;
      });
      let content = null;
      if (_.isEmpty(threadComments)) {
        // no replies
        content = /*#__PURE__*/React.createElement(Text, {
          style: [styles.commentRepliesText, {
            color: this.props.colourBrandingMain
          }]
        }, `Reply to ${getFirstName(!isUserBlocked && c.User ? c.User.displayName : "comment")}`);
      } else {
        // existing replies
        const profilePics = _.take(_.uniqBy(threadComments, c => c.UserId), 3);
        content = /*#__PURE__*/React.createElement(View, {
          style: styles.multiReplyContainer
        }, profilePics.map((c, i) => {
          var _c$User;
          return /*#__PURE__*/React.createElement(ProfilePic, {
            key: c.Id,
            style: {
              marginRight: -10
            },
            Diameter: 20,
            ProfilePic: (_c$User = c.User) === null || _c$User === void 0 ? void 0 : _c$User.profilePic
          });
        }), /*#__PURE__*/React.createElement(Text, {
          style: [styles.commentRepliesText, {
            marginLeft: 20,
            color: this.props.colourBrandingMain
          }]
        }, `${threadComments.length} repl${getPluralOptions(threadComments.length, "y", "ies")}`));
      }
      return /*#__PURE__*/React.createElement(View, {
        style: styles.commentReplies
      }, /*#__PURE__*/React.createElement(TouchableOpacity, {
        onPress: () => {
          this.onOpenThread(c);
        }
      }, content));
    });
    this.state = {
      commentsLoading: false,
      comments: [],
      addingComment: false,
      commentToDelete: null,
      commentToReport: null,
      commentReportedStatus: null,
      reportLoading: false,
      processing: false,
      muteExpiry: null,
      muteLoaded: false
    };
  }
  componentDidMount() {
    this.getNotificationSate();
    if (!_.includes(this.props.user.hidden, "viewComment")) {
      this.getComments();
    }
  }
  componentWillUnmount() {
    if (this.loadTimer) {
      clearTimeout(this.loadTimer);
    }
  }
  onPressCommentImage(image) {
    this.setState({
      imagePopupSource: [image],
      imagePopupOpen: true
    });
  }
  onGoToAdd() {
    var _this$props$commentRe;
    (_this$props$commentRe = this.props.commentReply) === null || _this$props$commentRe === void 0 || (_this$props$commentRe = _this$props$commentRe.current) === null || _this$props$commentRe === void 0 || _this$props$commentRe.focusInput();
  }
  getAdjustedSize(size) {
    if (this.props.scaleFont) {
      return size + this.props.user.fontScale;
    }
    return size;
  }
  getComments() {
    if (!this.state.commentsLoadStarted) {
      var _this$props$commentRe2;
      this.setState({
        commentsLoadStarted: true,
        commentsLoading: true
      });
      (_this$props$commentRe2 = this.props.commentReply) === null || _this$props$commentRe2 === void 0 || (_this$props$commentRe2 = _this$props$commentRe2.current) === null || _this$props$commentRe2 === void 0 || _this$props$commentRe2.loadingStarted();
      this.loadComments();
    }
  }
  isEmpty() {
    return _.isEmpty(this.state.comments);
  }
  loadComments() {
    const minTime = this.isEmpty() ? 0 : _.maxBy(this.state.comments, c => {
      return c.Timestamp;
    }).Timestamp;
    reactionActions.getComments(this.props.entityId, this.props.entityType, minTime).then(res => {
      var _this$props$commentRe3;
      this.setState({
        comments: _.sortBy(_.uniqBy(_.filter(_.concat(this.state.comments, res.data), c => {
          if (!this.props.threadId) {
            return true;
          }
          return c.Id === this.props.threadId || c.ParentId === this.props.threadId;
        }), c => {
          return c.Id;
        }), "Timestamp"),
        commentsLoading: false
      }, () => {
        if (this.props.onCommentsLoaded) {
          this.props.onCommentsLoaded(this.state.comments.length);
        }
      });
      //if (this.props.commentReply) {
      (_this$props$commentRe3 = this.props.commentReply) === null || _this$props$commentRe3 === void 0 || (_this$props$commentRe3 = _this$props$commentRe3.current) === null || _this$props$commentRe3 === void 0 || _this$props$commentRe3.loadingCompleted();
      //}
      if (this.props.live) {
        this.loadTimer = setTimeout(() => {
          this.loadComments();
        }, this.props.refreshFrequency || 2000);
      }
    }).catch(error => {
      var _this$props$commentRe4;
      console.error("loadComments error", error);
      this.setState({
        commentsLoading: false
      });
      (_this$props$commentRe4 = this.props.commentReply) === null || _this$props$commentRe4 === void 0 || (_this$props$commentRe4 = _this$props$commentRe4.current) === null || _this$props$commentRe4 === void 0 || _this$props$commentRe4.loadingCompleted();
    });
  }
  startedAddingComment() {
    this.setState({
      addingComment: true
    });
  }
  commentAdded(comment) {
    const newComments = this.state.comments;
    newComments.push(comment);
    this.setState({
      addingComment: false,
      comments: newComments
    }, () => {
      if (this.props.onCommentAdded) {
        this.props.onCommentAdded();
      }
    });
  }
  canRemoveComment(c) {
    if (this.props.user.uid === c.UserId) {
      return true;
    }
    return _.includes(this.props.user.permissions, this.props.adminPermission);
  }
  closeCommentGallery() {
    this.setState({
      imagePopupSource: [],
      imagePopupOpen: false
    });
  }
  renderCommentDeleteConfirm() {
    return /*#__PURE__*/React.createElement(ConfirmPopup, {
      visible: !!this.state.commentToDelete,
      onConfirm: this.onPressConfirmDelete,
      onCancel: this.onPressCancelDelete,
      onClose: this.onPressCancelDelete,
      text: "Are you sure you want to delete this comment?"
    });
  }
  renderCommentReportConfirm() {
    return /*#__PURE__*/React.createElement(ConfirmPopup, {
      visible: !!this.state.commentToReport,
      onConfirm: this.onPressConfirmReport,
      onCancel: this.onPressCancelReport,
      onClose: this.onPressCancelReport,
      text: "Are you sure you want to report this comment?",
      extraContent: /*#__PURE__*/React.createElement(Text, {
        style: styles.commentReportText
      }, "This comment will be reported to our team and considered for deletion")
    });
  }
  renderCommentBlockConfirm() {
    return /*#__PURE__*/React.createElement(ConfirmPopup, {
      visible: !!this.state.commentToBlock,
      onConfirm: this.onPressConfirmBlock,
      onCancel: this.onPressCancelBlock,
      onClose: this.onPressCancelBlock,
      text: "Are you sure you want to block this user?",
      extraContent: /*#__PURE__*/React.createElement(Text, {
        style: styles.commentReportText
      }, "You will no longer see comments made by this user")
    });
  }
  renderCommentUnblockConfirm() {
    return /*#__PURE__*/React.createElement(ConfirmPopup, {
      visible: !!this.state.commentToUnblock,
      onConfirm: this.onPressConfirmUnblock,
      onCancel: this.onPressCancelUnblock,
      onClose: this.onPressCancelUnblock,
      text: "Are you sure you want to unblock this user?",
      extraContent: /*#__PURE__*/React.createElement(Text, {
        style: styles.commentReportText
      }, "You will once again see comments made by this user")
    });
  }
  renderCommentReportStatus() {
    const {
      commentReportedStatus
    } = this.state;
    const isSuccess = commentReportedStatus === "success";
    return /*#__PURE__*/React.createElement(ConfirmPopup, {
      visible: !!commentReportedStatus,
      onConfirm: this.onPressConfirmReportStatus,
      text: isSuccess ? "Thank you for reporting" : "Unable to report",
      extraContent: /*#__PURE__*/React.createElement(Text, {
        style: styles.commentReportText
      }, isSuccess ? "We will review the comment within 24 hours" : "There was a problem reporting the comment please try again later"),
      hideNo: true,
      yesText: "Done"
    });
  }
  renderCommentImage(c) {
    if (_.isEmpty(c.Image)) {
      return null;
    }
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.commentImageContainer,
      onPress: this.onPressCommentImage.bind(this, get1400(c.Image))
    }, /*#__PURE__*/React.createElement(Image, {
      style: styles.commentImage,
      source: {
        uri: getThumb300(c.Image)
      }
    }));
  }
  renderComment(c) {
    var _c$User2;
    const isUserBlocked = this.isUserBlocked(c);
    return /*#__PURE__*/React.createElement(View, {
      style: styles.comment,
      key: c.Id
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.commentFlex
    }, /*#__PURE__*/React.createElement(ProfilePic, {
      ProfilePic: isUserBlocked || !c.User ? null : c.User.profilePic,
      Diameter: 40,
      style: styles.commentProfilePic
    }), /*#__PURE__*/React.createElement(View, {
      style: styles.commentBlock
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.commentTitleRow
    }, this.canRemoveComment(c) ? /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.onPressDeleteComment.bind(this, c)
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.commentButtonContainer, {
        backgroundColor: this.props.colourBrandingMain
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "trash",
      type: "font-awesome",
      iconStyle: styles.commentButtonIcon
    }))) : !this.props.disableFlag && /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.onPressReportComment.bind(this, c)
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.commentButtonContainer, {
        backgroundColor: this.props.colourBrandingMain
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "flag",
      type: "font-awesome",
      iconStyle: styles.commentButtonIcon
    }))), !this.props.disableFlag && this.canBlockComment(c) && (isUserBlocked ? /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: {
        marginRight: 8
      },
      onPress: this.onPressUnblockUser.bind(this, c)
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.commentButtonContainer, {
        backgroundColor: this.props.colourBrandingMain
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "user-plus",
      type: "font-awesome",
      iconStyle: styles.commentButtonIcon
    }))) : /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: {
        marginRight: 8
      },
      onPress: this.onPressBlockUser.bind(this, c)
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.commentButtonContainer, {
        backgroundColor: this.props.colourBrandingMain
      }]
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "user-times",
      type: "font-awesome",
      iconStyle: styles.commentButtonIcon
    })))), /*#__PURE__*/React.createElement(Text, {
      style: [styles.commentName, {
        fontSize: this.getAdjustedSize(13)
      }]
    }, isUserBlocked ? "[blocked user]" : ((_c$User2 = c.User) === null || _c$User2 === void 0 ? void 0 : _c$User2.displayName) || "Unknown User")), !_.isEmpty(c.Comment) && /*#__PURE__*/React.createElement(Text, {
      style: [styles.commentText, {
        fontSize: this.getAdjustedSize(13)
      }]
    }, isUserBlocked ? "[hidden]" : c.Comment), !isUserBlocked && this.renderCommentImage(c))), /*#__PURE__*/React.createElement(View, {
      style: styles.commentBottom
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.commentTime, {
        fontSize: this.getAdjustedSize(13)
      }]
    }, moment.utc(c.Timestamp).local().format("D MMM • h:mma")), this.renderReplyText(c, isUserBlocked)));
  }
  renderMute() {
    const {
      notificationsForComments
    } = this.props;
    const {
      muteLoaded,
      muteExpiry,
      processing
    } = this.state;
    if (!notificationsForComments || !muteLoaded) return null;
    if (processing) return /*#__PURE__*/React.createElement(View, {
      style: styles.muteSpinnerContainer
    }, /*#__PURE__*/React.createElement(Spinner, {
      size: "small",
      color: this.props.colourBrandingMain
    }));
    const isMuted = this.isMuted();
    const hours = this.getMuteRemaining();
    const mutedFor = `Muted for ${hours} hour${getPluralS(hours)}`;
    // console.log(muteExpiry.format('DD MMM YYYY hh:mm a'));

    return /*#__PURE__*/React.createElement(View, {
      style: styles.muteContainer
    }, isMuted && muteExpiry ? /*#__PURE__*/React.createElement(Text, {
      style: [{
        color: this.props.colourBrandingMain
      }, styles.mutedForText]
    }, mutedFor) : null, /*#__PURE__*/React.createElement(InlineButton, {
      onPress: isMuted ? this.onUnmute : this.onMute,
      color: "#fff",
      style: [{
        borderColor: this.props.colourBrandingMain
      }, styles.muteButton],
      disabled: processing,
      disabledOpacity: true,
      noText: true
    }, /*#__PURE__*/React.createElement(View, {
      style: styles.muteButtonInner
    }, /*#__PURE__*/React.createElement(Icon, {
      name: isMuted ? "bell-o" : "bell-slash-o",
      type: "font-awesome",
      iconStyle: [{
        color: this.props.colourBrandingMain
      }, styles.muteButtonIcon]
    }), /*#__PURE__*/React.createElement(Text, {
      style: [{
        color: this.props.colourBrandingMain
      }, styles.muteButtonText]
    }, isMuted ? "Unmute" : "Mute"))));
  }
  renderComments() {
    if (this.state.commentsLoading) {
      return /*#__PURE__*/React.createElement(View, {
        style: styles.commentSection
      }, /*#__PURE__*/React.createElement(Spinner, {
        color: this.props.colourBrandingMain
      }));
    }
    if (this.isEmpty() && !this.state.addingComment) {
      if (_.includes(this.props.user.hidden, "addComment")) {
        return null;
      }
      if (!_.isNil(this.props.placeHolder) && _.isEmpty(this.props.placeHolder)) return null;
      return /*#__PURE__*/React.createElement(View, {
        style: styles.commentSection
      }, /*#__PURE__*/React.createElement(Text, {
        style: [styles.commentsEmpty, {
          fontSize: this.getAdjustedSize(15)
        }]
      }, _.isNil(this.props.placeHolder) ? "Be the first to add a comment!" : this.props.placeHolder));
    }
    let source = [...this.state.comments];
    if (this.props.reverseOrder) {
      source = source.reverse();
    }
    if (!this.props.showReplies && !this.props.threadId) {
      source = _.filter(source, c => {
        return !c.ParentId;
      });
    }
    return /*#__PURE__*/React.createElement(View, {
      style: styles.commentSection
    }, !this.isEmpty() && /*#__PURE__*/React.createElement(View, {
      style: styles.commentSectionTitleRow
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        alignItems: "flex-end"
      }
    }, this.renderMute(), !this.props.hideAddComment && this.state.comments.length > 2 && /*#__PURE__*/React.createElement(TouchableOpacity, {
      onPress: this.onGoToAdd.bind(this)
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.goToText, {
        color: this.props.colourBrandingMain
      }]
    }, "Add a comment"))), /*#__PURE__*/React.createElement(Text, {
      style: [styles.commentCount, {
        fontSize: this.getAdjustedSize(15)
      }]
    }, this.state.comments.length, ` comment${getPluralS(this.state.comments.length)}`)), this.props.reverseOrder && this.state.addingComment && /*#__PURE__*/React.createElement(Spinner, {
      color: this.props.colourBrandingMain
    }), source.map(c => {
      return this.renderComment(c);
    }), !this.props.reverseOrder && this.state.addingComment && /*#__PURE__*/React.createElement(Spinner, {
      color: this.props.colourBrandingMain
    }));
  }
  renderCommentImagePopup() {
    return /*#__PURE__*/React.createElement(ImagePopup, {
      visible: this.state.imagePopupOpen,
      images: this.state.imagePopupSource,
      onClose: this.closeCommentGallery.bind(this)
    });
  }
  renderReportLoading() {
    if (!this.state.reportLoading) return null;
    return /*#__PURE__*/React.createElement(View, {
      style: styles.reportLoadingContainer
    }, /*#__PURE__*/React.createElement(Spinner, {
      color: this.props.colourBrandingMain
    }));
  }
  render() {
    if (_.includes(this.props.user.hidden, "viewComment")) {
      return null;
    }
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.commentSectionOuter, this.props.style]
    }, this.renderComments(), this.renderReportLoading(), this.renderCommentDeleteConfirm(), this.renderCommentReportConfirm(), this.renderCommentBlockConfirm(), this.renderCommentUnblockConfirm(), this.renderCommentReportStatus(), this.renderCommentImagePopup());
  }
}
const styles = StyleSheet.create({
  commentSectionOuter: {
    flex: 1,
    paddingHorizontal: 16
  },
  commentSection: {
    flex: 1,
    paddingVertical: 12,
    borderTopColor: LINEGREY,
    borderTopWidth: 1
  },
  commentCount: {
    fontFamily: "sf-semibold",
    color: TEXT_DARKEST,
    flex: 1,
    marginTop: 4
  },
  comment: {
    marginTop: 16
  },
  commentFlex: {
    flexDirection: "row"
  },
  commentProfilePic: {
    marginRight: 8
  },
  commentBlock: {
    flex: 1,
    backgroundColor: BG_GREY,
    borderRadius: 5,
    padding: 8
  },
  commentTitleRow: {
    flexDirection: "row-reverse",
    alignItems: "center"
  },
  commentButtonContainer: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: "center",
    justifyContent: "center"
  },
  commentButtonIcon: {
    fontSize: 13,
    color: "#fff"
  },
  commentName: {
    fontFamily: "sf-semibold",
    color: TEXT_DARKEST,
    flex: 1
  },
  commentText: {
    marginTop: 8,
    fontFamily: "sf-regular",
    color: TEXT_DARKEST
  },
  commentBottom: {
    flexDirection: "row-reverse",
    justifyContent: "space-between",
    alignItems: "center"
  },
  commentTime: {
    fontFamily: "sf-regular",
    marginTop: 4,
    color: TEXT_LIGHT,
    textAlign: "right"
  },
  commentReplies: {
    flex: 1,
    paddingLeft: 48
  },
  commentRepliesText: {
    fontFamily: "sf-semibold",
    fontSize: 15
  },
  multiReplyContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 4
  },
  commentImageContainer: {
    marginTop: 8,
    width: 60,
    height: 60
  },
  commentImage: {
    width: 60,
    height: 60,
    borderRadius: 2
  },
  commentsEmpty: {
    fontFamily: "sf-semibold",
    color: TEXT_DARKEST
  },
  commentSectionTitleRow: {
    flexDirection: "row-reverse"
  },
  commentReportText: {
    fontFamily: "sf-regular",
    fontSize: 14,
    paddingHorizontal: 22,
    textAlign: "center"
  },
  reportLoadingContainer: {
    paddingVertical: 10
  },
  goToText: {
    marginTop: 4
  },
  muteSpinnerContainer: {
    width: 100,
    marginBottom: 6
  },
  muteContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-end",
    marginBottom: 6
  },
  mutedForText: {
    fontFamily: "sf-semibold",
    fontSize: 13,
    marginRight: 8
  },
  muteButton: {
    borderWidth: 1,
    paddingHorizontal: 8
  },
  muteButtonInner: {
    flexDirection: "row",
    alignItems: "center"
  },
  muteButtonIcon: {
    fontSize: 14
  },
  muteButtonText: {
    fontFamily: "sf-semibold",
    fontSize: 14,
    marginLeft: 6
  }
});
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state),
    user: state.user,
    notificationsForComments: getSiteSettingFromState(state, "NotificationsForComments", false),
    blockedUsers: state.userSettings.blockedUsers || []
  };
};
const commentSection = connect(mapStateToProps, {
  blockUser,
  unblockUser
}, null, {
  forwardRef: true
})(CommentSection);
export { commentSection as CommentSection };
//# sourceMappingURL=CommentSection.js.map