"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _StarsRatingBarSt = require("./StarsRatingBar.st.css.js");
var _constants = require("../constants");
var _Text = _interopRequireDefault(require("../../Text"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _utils = require("../../providers/useCollapse/utils");
var _StarsRatingBar = _interopRequireDefault(require("../StarsRatingBar.semanticClassNames"));
var _common = require("../utils/common");
var _visuallyHiddenSt = require("../../common/styles/visuallyHidden.st.css.js");
var _Focusable = require("../../common/Focusable");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/StarsRatingBar/components/InteractiveStarsRatingBar.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var renderCaption = (_ref, value) => {
  var {
    descriptionValues
  } = _ref;
  if (!Array.isArray(descriptionValues) || descriptionValues.length !== 5 || !value) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement("div", {
    className: _StarsRatingBarSt.classes.rateCaption,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 28,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: _constants.dataHooks.ratingCaption,
    "aria-hidden": true,
    ellipsis: true,
    size: "small",
    weight: "normal",
    secondary: true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 29,
      columnNumber: 7
    }
  }, descriptionValues[value - 1]));
};
var InteractiveStarsRatingBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  var _ref2;
  var {
    dataHook,
    className,
    value,
    onChange,
    focusableOnFocus,
    focusableOnBlur
  } = props;
  var name = (0, _utils.useUniqueId)(props.name);
  var [hoveredValue, setHoveredValue] = (0, _react.useState)(null);
  var visualValue = (_ref2 = hoveredValue !== null && hoveredValue !== void 0 ? hoveredValue : value) !== null && _ref2 !== void 0 ? _ref2 : 0;
  var valueToPassReference = value > 0 ? value : 1; // if value is 0, we pass the reference to the first star
  var sizePx = (0, _common.getStarSizePx)(props);
  var handleChange = event => {
    onChange == null || onChange(parseInt(event.currentTarget.value));
  };
  var createPointerEventHandler = value => event => {
    if (event.pointerType === 'touch') {
      // Ignoring the touch hover, because it is sticky and results in bad UX.
      return;
    }
    switch (event.type) {
      case 'pointerenter':
        setHoveredValue(value);
        break;
      case 'pointerleave':
      case 'pointercancel':
        setHoveredValue(null);
        break;
      default:
        break;
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.root, className),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    role: "radiogroup",
    className: _StarsRatingBarSt.classes.starsContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 89,
      columnNumber: 7
    }
  }, _constants.starValues.map(starValue => {
    var filled = visualValue >= starValue;
    var checked = value === starValue;
    var Icon = filled ? _wixUiIconsCommon.StarFilled : _wixUiIconsCommon.Star;
    var handlePointerEvent = createPointerEventHandler(starValue);
    return /*#__PURE__*/_react.default.createElement("label", {
      key: starValue,
      "data-hook": filled ? _constants.dataHooks.filledStar : _constants.dataHooks.emptyStar,
      "data-index": starValue,
      className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.starContainer, _StarsRatingBar.default.buttonInteractive),
      onPointerEnter: handlePointerEvent,
      onPointerLeave: handlePointerEvent,
      onPointerCancel: handlePointerEvent,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 97,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement("input", {
      type: "radio",
      name: name,
      value: starValue,
      checked: checked,
      "aria-label": (0, _common.getRatingLabel)(props, starValue),
      className: _visuallyHiddenSt.classes.visuallyHidden,
      onChange: handleChange,
      ref: valueToPassReference === starValue ? ref : undefined,
      onFocus: focusableOnFocus,
      onBlur: focusableOnBlur,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 109,
        columnNumber: 15
      }
    }), /*#__PURE__*/_react.default.createElement(Icon, {
      "aria-hidden": true,
      className: (0, _StarsRatingBarSt.st)(_StarsRatingBarSt.classes.star, {
        filled
      }, filled ? _StarsRatingBar.default.filledIcon : _StarsRatingBar.default.emptyIcon),
      size: sizePx,
      __self: void 0,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 121,
        columnNumber: 15
      }
    }));
  })), renderCaption(props, visualValue));
});
var _default = exports.default = (0, _Focusable.withFocusable)(InteractiveStarsRatingBar);
//# sourceMappingURL=InteractiveStarsRatingBar.js.map