"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledStar = exports.StyledRoot = exports.StyledEmoticon = void 0;

var _styles = require("../styles");

var _svgIcons = require("./svg-icons");

/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
var StyledRoot = (0, _styles.styled)('ul', function (_ref) {
  var $theme = _ref.$theme;
  return {
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0,
    marginBottom: 0,
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
    paddingBottom: 0,
    display: 'inline-block',
    ':focus': {
      outline: 'none'
    }
  };
});
exports.StyledRoot = StyledRoot;
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
var StyledStar = (0, _styles.styled)('li', function (_ref2) {
  var $theme = _ref2.$theme,
      $isActive = _ref2.$isActive,
      $isPartialActive = _ref2.$isPartialActive,
      $isSelected = _ref2.$isSelected,
      $isFocusVisible = _ref2.$isFocusVisible,
      $isReadOnly = _ref2.$isReadOnly,
      $size = _ref2.$size;
  var starStroke = $theme.colors.ratingStroke;
  var starFill = $theme.colors.ratingInactiveFill;
  var prePartialStarStroke;
  var prePartialStarFill;

  if ($isActive) {
    starStroke = starFill = $theme.colors.borderSelected;
  }

  if ($isPartialActive && !$isActive) {
    prePartialStarStroke = prePartialStarFill = $theme.colors.borderSelected;
  }

  var styles = {
    paddingLeft: 0,
    paddingTop: 0,
    paddingBottom: 0,
    paddingRight: 0,
    display: 'inline-block',
    transition: "transform ".concat($theme.animation.timing400),
    cursor: $isReadOnly ? 'default' : 'pointer',
    marginLeft: 0,
    marginTop: 0,
    marginBottom: 0,
    marginRight: $theme.sizing.scale300,
    width: "".concat($size, "px"),
    height: "".concat($size, "px"),
    lineHeight: 1,
    // @ts-ignore
    transform: $isSelected ? 'scale(1.35)' : null,
    outline: $isFocusVisible ? "3px solid ".concat($theme.colors.borderAccent) : 'none',
    outlineOffset: '2px',
    position: 'relative',
    ':after': {
      transition: "all ".concat($theme.animation.timing400),
      content: "url('data:image/svg+xml," + (0, _svgIcons.starSVG)(starFill, starStroke, $size) + "')",
      height: '100%'
    },
    ':before': prePartialStarFill && prePartialStarStroke ? {
      transition: "all ".concat($theme.animation.timing400),
      position: 'absolute',
      display: 'block',
      top: 0,
      left: 0,
      width: '50%',
      height: '100%',
      overflow: 'hidden',
      content: "url('data:image/svg+xml," + (0, _svgIcons.starSVG)(prePartialStarFill, prePartialStarStroke, $size) + "')"
    } : {},
    ':last-of-type': {
      marginRight: 0
    }
  };
  return styles;
});
exports.StyledStar = StyledStar;
StyledStar.displayName = "StyledStar";
StyledStar.displayName = 'StyledStar';
var StyledEmoticon = (0, _styles.styled)('li', function (_ref3) {
  var $theme = _ref3.$theme,
      $isActive = _ref3.$isActive,
      $isSelected = _ref3.$isSelected,
      _ref3$$index = _ref3.$index,
      $index = _ref3$$index === void 0 ? 1 : _ref3$$index,
      $isFocusVisible = _ref3.$isFocusVisible,
      $isReadOnly = _ref3.$isReadOnly,
      $size = _ref3.$size;
  var emoticonFill = $theme.colors.ratingInactiveFill;

  if ($isActive) {
    emoticonFill = $theme.colors.backgroundWarning;
  }

  var ratingIcons = [(0, _svgIcons.angryRatingSVG)(emoticonFill, $size), (0, _svgIcons.sadRatingSVG)(emoticonFill, $size), (0, _svgIcons.neutralRatingSVG)(emoticonFill, $size), (0, _svgIcons.happyRatingSVG)(emoticonFill, $size), (0, _svgIcons.veryHappyRatingSVG)(emoticonFill, $size)];
  var styles = {
    paddingLeft: 0,
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    display: 'inline-block',
    transition: "transform ".concat($theme.animation.timing400),
    cursor: $isReadOnly ? 'default' : 'pointer',
    marginLeft: 0,
    marginTop: 0,
    marginBottom: 0,
    marginRight: $theme.sizing.scale300,
    width: "".concat($size, "px"),
    height: "".concat($size, "px"),
    // @ts-ignore
    transform: $isSelected ? 'scale(1.1)' : null,
    outline: $isFocusVisible ? "3px solid ".concat($theme.colors.borderAccent) : 'none',
    outlineOffset: '2px',
    ':after': {
      transition: "all ".concat($theme.animation.timing400),
      content: "url('data:image/svg+xml," + ratingIcons[$index - 1] + "')"
    }
  };
  return styles;
});
exports.StyledEmoticon = StyledEmoticon;
StyledEmoticon.displayName = "StyledEmoticon";
StyledEmoticon.displayName = 'StyledEmoticon';