"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _Focusable = require("../common/Focusable");
var _FacesRatingBarSt = require("./FacesRatingBar.st.css.js");
var _constants = require("./constants");
var _Box = _interopRequireDefault(require("../Box/Box"));
var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
var _FaceIcons = require("./icons/FaceIcons");
var _excluded = ["faceIndex", "isSelected", "iconType", "isHovered", "showDescriptionValues", "descriptionValues", "onClick", "onMouseEnter", "onMouseLeave", "handleFocus", "handleBlur", "maxValue"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/FacesRatingBar/FacesRatingBar.jsx",
  _this2 = void 0;
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var faceIconsMap = {
  5: {
    1: _FaceIcons.FaceDisapointed,
    2: _FaceIcons.FaceFrowning,
    3: _FaceIcons.FaceNeutral,
    4: _FaceIcons.FaceSmiling,
    5: _FaceIcons.FaceGrining
  },
  4: {
    1: _FaceIcons.FaceDisapointed,
    2: _FaceIcons.FaceFrowning,
    3: _FaceIcons.FaceSmiling,
    4: _FaceIcons.FaceGrining
  },
  3: {
    1: _FaceIcons.FaceDisapointed,
    2: _FaceIcons.FaceNeutral,
    3: _FaceIcons.FaceSmiling
  },
  2: {
    1: _FaceIcons.FaceDisapointed,
    2: _FaceIcons.FaceSmiling
  }
};

/** A rating component that will enable the user to rate on a 1-5 scale. */
var FacesRatingBar = /*#__PURE__*/function (_React$PureComponent) {
  function FacesRatingBar() {
    var _this;
    (0, _classCallCheck2["default"])(this, FacesRatingBar);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, FacesRatingBar, [].concat(args));
    _this.state = {
      faceHoveredIndex: 0
    };
    _this._onFaceClick = function (index) {
      _this.props.onChange(index);
    };
    _this._onFaceMouseEnter = function (index) {
      _this.setState({
        faceHoveredIndex: index
      });
    };
    _this._onFaceMouseLeave = function () {
      _this.setState({
        faceHoveredIndex: 0
      });
    };
    _this._onFaceFocus = function (faceIndex, focusableProps) {
      // We would like to change the faces color on focus / hover
      _this.setState({
        faceHoveredIndex: faceIndex
      });
      focusableProps.focusableOnFocus();
    };
    _this._onFaceBlur = function (focusableProps) {
      // We would like to change the faces color on focus / hover
      _this.setState({
        faceHoveredIndex: 0
      });
      focusableProps.focusableOnBlur();
    };
    _this._shouldShowDescriptionValues = function () {
      var _this$props = _this.props,
        readOnly = _this$props.readOnly,
        descriptionValues = _this$props.descriptionValues,
        maxValue = _this$props.maxValue;
      var shouldShowDescriptionValues = false;

      // Adding description values is not available in read only mode and it must be an array of strings at size of at least 2.
      if (!readOnly && descriptionValues) {
        shouldShowDescriptionValues = Array.isArray(descriptionValues) && descriptionValues.length === maxValue;
      }
      return shouldShowDescriptionValues;
    };
    return _this;
  }
  (0, _inherits2["default"])(FacesRatingBar, _React$PureComponent);
  return (0, _createClass2["default"])(FacesRatingBar, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
        readOnly = _this$props2.readOnly,
        value = _this$props2.value;
      if (readOnly && value === 0) {
        throw new Error('In readOnly mode the value couldn’t be 0. Please enter a value between 1 to 5.');
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
        dataHook = _this$props3.dataHook,
        readOnly = _this$props3.readOnly,
        value = _this$props3.value,
        descriptionValues = _this$props3.descriptionValues,
        maxValue = _this$props3.maxValue;
      var faceHoveredIndex = this.state.faceHoveredIndex;
      var showDescriptionValues = this._shouldShowDescriptionValues();
      return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
        className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.root, {}, this.props),
        dataHook: dataHook,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 106,
          columnNumber: 7
        }
      }, /*#__PURE__*/_react["default"].createElement(Faces, {
        readOnly: readOnly,
        maxValue: maxValue,
        selectedIndex: value,
        hoveredIndex: faceHoveredIndex,
        showDescriptionValues: showDescriptionValues,
        descriptionValues: descriptionValues,
        onClick: this._onFaceClick,
        onMouseEnter: this._onFaceMouseEnter,
        onMouseLeave: this._onFaceMouseLeave,
        handleFocus: this._onFaceFocus,
        handleBlur: this._onFaceBlur,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 107,
          columnNumber: 9
        }
      }));
    }
  }]);
}(_react["default"].PureComponent);
var Faces = function Faces(_ref) {
  var readOnly = _ref.readOnly,
    selectedIndex = _ref.selectedIndex,
    hoveredIndex = _ref.hoveredIndex,
    showDescriptionValues = _ref.showDescriptionValues,
    descriptionValues = _ref.descriptionValues,
    onClick = _ref.onClick,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave,
    handleFocus = _ref.handleFocus,
    handleBlur = _ref.handleBlur,
    maxValue = _ref.maxValue;
  var facesArr = [];
  for (var i = 1; i <= maxValue; i++) {
    var isSelected = selectedIndex === i;
    var isHovered = hoveredIndex === i;
    var iconType = _constants.facesData[i].name;
    var commonProps = {
      key: i,
      faceIndex: i,
      isSelected: isSelected,
      iconType: iconType,
      maxValue: maxValue
    };
    var face = readOnly ? /*#__PURE__*/_react["default"].createElement(ReadOnlyModeFace, (0, _extends2["default"])({}, commonProps, {
      __self: _this2,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 154,
        columnNumber: 7
      }
    })) : /*#__PURE__*/_react["default"].createElement(FocusableInteractiveModeFace, (0, _extends2["default"])({}, commonProps, {
      isHovered: isHovered,
      showDescriptionValues: showDescriptionValues,
      descriptionValues: descriptionValues,
      onClick: onClick,
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      handleFocus: handleFocus,
      handleBlur: handleBlur,
      __self: _this2,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 156,
        columnNumber: 7
      }
    }));
    facesArr.push(face);
  }
  return facesArr;
};
var InteractiveModeFace = function InteractiveModeFace(_ref2) {
  var faceIndex = _ref2.faceIndex,
    isSelected = _ref2.isSelected,
    iconType = _ref2.iconType,
    isHovered = _ref2.isHovered,
    showDescriptionValues = _ref2.showDescriptionValues,
    descriptionValues = _ref2.descriptionValues,
    _onClick = _ref2.onClick,
    _onMouseEnter = _ref2.onMouseEnter,
    onMouseLeave = _ref2.onMouseLeave,
    handleFocus = _ref2.handleFocus,
    handleBlur = _ref2.handleBlur,
    maxValue = _ref2.maxValue,
    focusableProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
  var IconTagName = faceIconsMap[maxValue][faceIndex];
  var tooltipContent = showDescriptionValues ? descriptionValues[faceIndex - 1] : '';
  return /*#__PURE__*/_react["default"].createElement("button", {
    "data-hook": _constants.dataHooks.face,
    "data-index": faceIndex,
    "data-selected": isSelected,
    className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.buttonWrapper),
    onClick: function onClick() {
      return _onClick(faceIndex);
    },
    onMouseEnter: function onMouseEnter() {
      return _onMouseEnter(faceIndex);
    },
    onMouseLeave: onMouseLeave,
    onFocus: function onFocus() {
      return handleFocus(faceIndex, focusableProps);
    },
    onBlur: function onBlur() {
      return handleBlur(focusableProps);
    },
    __self: _this2,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 196,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants.dataHooks.face,
    "data-selected": isSelected,
    className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.faceContainer, {
      type: 'interactive',
      hovered: isHovered,
      selected: isSelected,
      iconType: iconType
    }),
    __self: _this2,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 207,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
    dataHook: _constants.facesData[faceIndex].tooltipDataHook,
    content: tooltipContent,
    disabled: !showDescriptionValues,
    __self: _this2,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 217,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react["default"].createElement(IconTagName, {
    width: 22,
    height: 22,
    __self: _this2,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 222,
      columnNumber: 11
    }
  }))));
};
var FocusableInteractiveModeFace = (0, _Focusable.withFocusable)(InteractiveModeFace);
var ReadOnlyModeFace = function ReadOnlyModeFace(_ref3) {
  var faceIndex = _ref3.faceIndex,
    isSelected = _ref3.isSelected,
    iconType = _ref3.iconType,
    maxValue = _ref3.maxValue;
  var IconTagName = faceIconsMap[maxValue][faceIndex];
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants.dataHooks.face,
    "data-selected": isSelected,
    className: (0, _FacesRatingBarSt.st)(_FacesRatingBarSt.classes.faceContainer, {
      type: 'readOnly',
      selected: isSelected,
      iconType: iconType
    }),
    __self: _this2,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 235,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react["default"].createElement(IconTagName, {
    __self: _this2,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 244,
      columnNumber: 7
    }
  }));
};
FacesRatingBar.displayName = 'FacesRatingBar';
FacesRatingBar.defaultProps = {
  readOnly: false,
  onChange: function onChange() {},
  maxValue: 5
};
var _default = exports["default"] = FacesRatingBar;