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, TouchableOpacity } from "react-native";
import { Text } from "./Text";
import { connect } from "react-redux";
import _ from "lodash";
import { getReactions, getShadowStyle } from "../helper";
import { BG_GREY, TEXT_DARK, getMainBrandingColourFromState } from "../colours";
import { reactionActions } from "../apis";
class Reaction extends Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "onPressReaction", () => {
      if (!this.props.reactions[this.props.userId]) {
        reactionActions.add(this.props.entityId, this.props.entityType, this.props.reaction.key, this.props.site);
        this.props.onLike();
      } else {
        reactionActions.remove(this.props.entityId, this.props.entityType, this.props.reaction.key);
        this.props.onUnlike();
      }
    });
  }
  getStyleType() {
    if (this.props.reactions[this.props.userId]) {
      return "ThisHL";
    }
    if (this.props.anyHighlighted) {
      return "OtherHL";
    }
    return "Default";
  }
  getTopReaction() {
    return _.maxBy(Object.keys(this.props.reactions), key => {
      return Object.keys(this.props.reactions[key]).length;
    });
  }
  getIcon(topReaction) {
    return _.find(getReactions(), r => {
      return r.key === topReaction;
    }).icon;
  }
  render() {
    if (this.props.topReactionOnly) {
      const topReaction = this.getTopReaction();
      if (!topReaction) {
        return null;
      }
      return /*#__PURE__*/React.createElement(View, {
        style: [styles.container, styles.containerThisHL, this.props.style]
      }, /*#__PURE__*/React.createElement(Image, {
        style: [styles.image, this.props.imageStyle],
        source: this.getIcon(topReaction)
      }), /*#__PURE__*/React.createElement(Text, {
        style: [styles.count, this.props.countStyle]
      }, Object.keys(this.props.reactions[topReaction]).length));
    }
    return /*#__PURE__*/React.createElement(TouchableOpacity, {
      style: styles.touchable,
      onPress: this.onPressReaction,
      disabled: this.props.user.type === "KIOSK"
    }, /*#__PURE__*/React.createElement(View, {
      style: [styles.container, styles[`container${this.getStyleType()}`], this.props.style]
    }, /*#__PURE__*/React.createElement(Image, {
      style: [styles.image, this.props.imageStyle],
      source: this.props.reaction.icon
    }), /*#__PURE__*/React.createElement(Text, {
      style: [styles.count, this.getStyleType() === "ThisHL" && {
        color: this.props.colourBrandingMain
      }, this.props.countStyle]
    }, Object.keys(this.props.reactions).length)));
  }
}
const styles = {
  touchable: {
    marginHorizontal: 4,
    width: 60,
    height: 30
  },
  container: {
    width: 60,
    height: 30,
    borderRadius: 15,
    backgroundColor: BG_GREY,
    flexDirection: "row-reverse",
    alignItems: "center",
    paddingHorizontal: 8
  },
  containerThisHL: {
    ...getShadowStyle()
  },
  containerOtherHL: {
    opacity: 0.5
  },
  image: {
    width: 20,
    height: 20,
    resizeMode: "contain"
  },
  count: {
    fontFamily: "sf-medium",
    color: TEXT_DARK,
    flex: 1,
    textAlign: "center",
    fontSize: 16
  }
};
const mapStateToProps = state => {
  return {
    colourBrandingMain: getMainBrandingColourFromState(state),
    user: state.user
  };
};
const reaction = connect(mapStateToProps, {})(Reaction);
export { reaction as Reaction };
//# sourceMappingURL=Reaction.js.map