"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.ProductRating = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;

var ProductRating = function ProductRating(_ref) {
  var _ref$fillColor = _ref.fillColor,
      fillColor = _ref$fillColor === void 0 ? '#ffbf00' : _ref$fillColor,
      _ref$emptyColor = _ref.emptyColor,
      emptyColor = _ref$emptyColor === void 0 ? '#222' : _ref$emptyColor;

  var _useLocalRating = (0, _lib.useLocalRating)(),
      rating = _useLocalRating.rating,
      handleRating = _useLocalRating.handleRating;

  var labels = (0, _lib.useLocalLabels)();

  var _useBoolean = (0, _lib.useBoolean)(),
      isOpen = _useBoolean[0],
      setIsOpen = _useBoolean[1];

  var containerRef = (0, _react.useRef)(null);
  (0, _lib.useClickOutside)(containerRef, function () {
    return setIsOpen.off();
  }, [containerRef]);

  var handleClick = function handleClick(index) {
    handleRating(index);
    setIsOpen.off();
  };

  var ratingsArr = [1, 2, 3, 4, 5];
  return /*#__PURE__*/_react["default"].createElement(Container, {
    ref: containerRef
  }, /*#__PURE__*/_react["default"].createElement(SmallStars, {
    onClick: function onClick() {
      return setIsOpen.toggle();
    }
  }, ratingsArr.map(function (ratingValue) {
    return /*#__PURE__*/_react["default"].createElement(SmallStar, {
      key: "small_star_" + ratingValue,
      full: rating.value >= ratingValue,
      emptyColor: emptyColor,
      fillColor: fillColor
    });
  })), /*#__PURE__*/_react["default"].createElement(AbsoluteContainer, {
    isOpen: isOpen
  }, /*#__PURE__*/_react["default"].createElement(Stars, null, ratingsArr.map(function (ratingValue) {
    return /*#__PURE__*/_react["default"].createElement(Star, {
      key: "star_" + ratingValue,
      full: rating.value >= ratingValue,
      onClick: function onClick() {
        return handleClick(ratingValue);
      },
      emptyColor: emptyColor,
      fillColor: fillColor
    });
  })), /*#__PURE__*/_react["default"].createElement(RatingText, null, rating.value + "/5"), /*#__PURE__*/_react["default"].createElement(RatingCount, null, rating.count + " " + (rating.count > 1 ? labels.ratings : labels.rating))));
};

exports.ProductRating = ProductRating;

var Container = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-row mb-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  line-height: 1;\n"])));

var SmallStars = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  &:hover {\n    cursor: pointer;\n  }\n"])));

var SmallStar = (0, _styledComponents["default"])(_Common.IconStar).attrs({
  className: ''
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 1.2rem;\n  padding: 0.1rem;\n  fill: ", ";\n"])), function (_ref2) {
  var full = _ref2.full,
      fillColor = _ref2.fillColor,
      emptyColor = _ref2.emptyColor;
  return full ? fillColor : emptyColor;
});

var AbsoluteContainer = _styledComponents["default"].div.attrs({
  className: 'p-1 align-items-end justify-content-around'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  bottom: 125%;\n  left: -0.8rem;\n  width: 20rem;\n  display: ", ";\n  background-color: ", ";\n  border: 0.1rem solid ", ";\n  border-radius: 0.8rem;\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 0.8rem;\n    width: 0;\n    height: 0;\n    border-left: 0.5rem solid transparent;\n    border-right: 0.5rem solid transparent;\n    border-top: 0.5rem solid ", ";\n  }\n\n  @media (min-width: ", ") {\n    left: calc((1.4rem * 5) * -1);\n\n    &:after {\n      left: calc(50% - 0.5rem);\n    }\n  }\n"])), function (_ref3) {
  var isOpen = _ref3.isOpen;
  return isOpen ? 'flex' : 'none';
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.secondary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.light;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.light;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
});

var Stars = _styledComponents["default"].div.attrs({
  className: 'd-flex'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Star = (0, _styledComponents["default"])(_Common.IconStar).attrs({
  className: ''
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 1.8rem;\n  padding: 0.2rem;\n  fill: ", ";\n  opacity: 0.8;\n\n  &:hover {\n    opacity: 1;\n    cursor: pointer;\n  }\n"])), function (_ref8) {
  var full = _ref8.full,
      fillColor = _ref8.fillColor,
      emptyColor = _ref8.emptyColor;
  return full ? fillColor : emptyColor;
});

var RatingText = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var RatingCount = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1rem;\n  color: ", ";\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.grey;
});
//# sourceMappingURL=index.js.map