import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

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

import React, { useRef } from 'react'; // eslint-disable-line

import styled from 'styled-components';
import { useBoolean, useLocalLabels, useLocalRating, useClickOutside } from '@sentecacommerce-theme/lib';
import { IconStar } from '../../../Common';
export var ProductRating = (_ref) => {
  var {
    fillColor = '#ffbf00',
    emptyColor = '#222'
  } = _ref;
  var {
    rating,
    handleRating
  } = useLocalRating();
  var labels = useLocalLabels();
  var [isOpen, setIsOpen] = useBoolean();
  var containerRef = useRef(null);
  useClickOutside(containerRef, () => setIsOpen.off(), [containerRef]);

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

  var ratingsArr = [1, 2, 3, 4, 5];
  return /*#__PURE__*/React.createElement(Container, {
    ref: containerRef
  }, /*#__PURE__*/React.createElement(SmallStars, {
    onClick: () => setIsOpen.toggle()
  }, ratingsArr.map(ratingValue => /*#__PURE__*/React.createElement(SmallStar, {
    key: "small_star_" + ratingValue,
    full: rating.value >= ratingValue,
    emptyColor: emptyColor,
    fillColor: fillColor
  }))), /*#__PURE__*/React.createElement(AbsoluteContainer, {
    isOpen: isOpen
  }, /*#__PURE__*/React.createElement(Stars, null, ratingsArr.map(ratingValue => /*#__PURE__*/React.createElement(Star, {
    key: "star_" + ratingValue,
    full: rating.value >= ratingValue,
    onClick: () => handleClick(ratingValue),
    emptyColor: emptyColor,
    fillColor: fillColor
  }))), /*#__PURE__*/React.createElement(RatingText, null, rating.value + "/5"), /*#__PURE__*/React.createElement(RatingCount, null, rating.count + " " + (rating.count > 1 ? labels.ratings : labels.rating))));
};
var Container = styled.div.attrs({
  className: 'd-flex flex-row mb-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  line-height: 1;\n"])));
var SmallStars = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  &:hover {\n    cursor: pointer;\n  }\n"])));
var SmallStar = styled(IconStar).attrs({
  className: ''
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 1.2rem;\n  padding: 0.1rem;\n  fill: ", ";\n"])), (_ref2) => {
  var {
    full,
    fillColor,
    emptyColor
  } = _ref2;
  return full ? fillColor : emptyColor;
});
var AbsoluteContainer = styled.div.attrs({
  className: 'p-1 align-items-end justify-content-around'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    isOpen
  } = _ref3;
  return isOpen ? 'flex' : 'none';
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.light;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
});
var Stars = styled.div.attrs({
  className: 'd-flex'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Star = styled(IconStar).attrs({
  className: ''
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), (_ref8) => {
  var {
    full,
    fillColor,
    emptyColor
  } = _ref8;
  return full ? fillColor : emptyColor;
});
var RatingText = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var RatingCount = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  font-size: 1rem;\n  color: ", ";\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.grey;
});
//# sourceMappingURL=index.js.map