"use strict";

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

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

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

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

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

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

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

var _config = require("../../../config");

var _templateObject;

var IconAnimatedArrow = function IconAnimatedArrow(_ref) {
  var _ref$direction = _ref.direction,
      direction = _ref$direction === void 0 ? 'down' : _ref$direction,
      _ref$color = _ref.color,
      color = _ref$color === void 0 ? _config.Config.theme.palette.primary : _ref$color,
      _ref$disableAnimation = _ref.disableAnimation,
      disableAnimation = _ref$disableAnimation === void 0 ? (0, _lib.readFromLocalStorage)('DropdownSelect__isSelecting') : _ref$disableAnimation;

  var _useBoolean = (0, _lib.useBoolean)(false),
      show = _useBoolean[0],
      setShow = _useBoolean[1];

  (0, _react.useEffect)(function () {
    var timeout = setTimeout(setShow.on, 200);
    return function () {
      return clearTimeout(timeout);
    };
  }, [disableAnimation, direction, setShow.on]);
  return /*#__PURE__*/_react["default"].createElement(Container, {
    style: {
      opacity: show || disableAnimation ? 1 : 0
    },
    color: color,
    direction: direction
  });
};

exports.IconAnimatedArrow = IconAnimatedArrow;
// TODO: left and right
var animationsMap = {
  up: 'up',
  right: 'right',
  down: 'down',
  left: 'left'
};

var Container = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 1.4rem;\n  height: 1.4rem;\n  position: relative;\n  display: inline-block;\n  cursor: pointer;\n  top: 0;\n  transform: ", ";\n\n  &:after,\n  &:before {\n    content: '';\n    width: 0.9rem;\n    height: 0.2rem;\n    background: ", ";\n    display: block;\n    position: absolute;\n    top: 50%;\n  }\n\n  &:before {\n    border-top-left-radius: 0.1rem;\n    border-bottom-left-radius: 0.1rem;\n    left: 0;\n    transform: translateY(-50%) rotate(46deg);\n\n    ", "\n  }\n\n  &:after {\n    border-top-right-radius: 0.1rem;\n    border-bottom-right-radius: 0.1rem;\n    right: 0;\n    transform: translateY(-50%) rotate(-46deg);\n\n    ", "\n  }\n\n  @keyframes animation-before-up {\n    0% {\n      -webkit-transform: translateY(-50%) rotate(46deg);\n      -ms-transform: translateY(-50%) rotate(46deg);\n      transform: translateY(-50%) rotate(46deg);\n    }\n\n    50% {\n      -webkit-transform: translate(-20%, -50%) rotate(0deg);\n      -ms-transform: translate(-20%, -50%) rotate(0deg);\n      transform: translate(-20%, -50%) rotate(0deg);\n    }\n\n    100% {\n      -webkit-transform: translateY(-50%) rotate(-46deg);\n      -ms-transform: translateY(-50%) rotate(-46deg);\n      transform: translateY(-50%) rotate(-46deg);\n    }\n  }\n  @keyframes animation-after-up {\n    0% {\n      -webkit-transform: translateY(-50%) rotate(-46deg);\n      -ms-transform: translateY(-50%) rotate(-46deg);\n      transform: translateY(-50%) rotate(-46deg);\n    }\n\n    50% {\n      -webkit-transform: translate(20%, -50%) rotate(0deg);\n      -ms-transform: translate(20%, -50%) rotate(0deg);\n      transform: translate(20%, -50%) rotate(0deg);\n    }\n\n    100% {\n      -webkit-transform: translateY(-50%) rotate(46deg);\n      -ms-transform: translateY(-50%) rotate(46deg);\n      transform: translateY(-50%) rotate(46deg);\n    }\n  }\n  @keyframes animation-before-down {\n    0% {\n      -webkit-transform: translateY(-50%) rotate(-46deg);\n      -ms-transform: translateY(-50%) rotate(-46deg);\n      transform: translateY(-50%) rotate(-46deg);\n    }\n\n    50% {\n      -webkit-transform: translate(-20%, -50%) rotate(0deg);\n      -ms-transform: translate(-20%, -50%) rotate(0deg);\n      transform: translate(-20%, -50%) rotate(0deg);\n    }\n\n    100% {\n      -webkit-transform: translateY(-50%) rotate(46deg);\n      -ms-transform: translateY(-50%) rotate(46deg);\n      transform: translateY(-50%) rotate(46deg);\n    }\n  }\n  @keyframes animation-after-down {\n    0% {\n      -webkit-transform: translateY(-50%) rotate(46deg);\n      -ms-transform: translateY(-50%) rotate(46deg);\n      transform: translateY(-50%) rotate(46deg);\n    }\n\n    50% {\n      -webkit-transform: translate(20%, -50%) rotate(0deg);\n      -ms-transform: translate(20%, -50%) rotate(0deg);\n      transform: translate(20%, -50%) rotate(0deg);\n    }\n\n    100% {\n      -webkit-transform: translateY(-50%) rotate(-46deg);\n      -ms-transform: translateY(-50%) rotate(-46deg);\n      transform: translateY(-50%) rotate(-46deg);\n    }\n  }\n  @keyframes animation-before-right {\n    0% {\n      -webkit-transform: translateY(-50%) rotate(46deg);\n      -ms-transform: translateY(-50%) rotate(46deg);\n      transform: translateY(-50%) rotate(46deg);\n    }\n\n    50% {\n      -webkit-transform: translate(-20%, -50%) rotate(0deg);\n      -ms-transform: translate(-20%, -50%) rotate(0deg);\n      transform: translate(-20%, -50%) rotate(0deg);\n    }\n\n    100% {\n      -webkit-transform: translateY(-50%) rotate(-46deg);\n      -ms-transform: translateY(-50%) rotate(-46deg);\n      transform: translateY(-50%) rotate(-46deg);\n    }\n  }\n  @keyframes animation-after-right {\n    0% {\n      -webkit-transform: translateY(-50%) rotate(-46deg);\n      -ms-transform: translateY(-50%) rotate(-46deg);\n      transform: translateY(-50%) rotate(-46deg);\n    }\n\n    50% {\n      -webkit-transform: translate(20%, -50%) rotate(0deg);\n      -ms-transform: translate(20%, -50%) rotate(0deg);\n      transform: translate(20%, -50%) rotate(0deg);\n    }\n\n    100% {\n      -webkit-transform: translateY(-50%) rotate(46deg);\n      -ms-transform: translateY(-50%) rotate(46deg);\n      transform: translateY(-50%) rotate(46deg);\n    }\n  }\n"])), function (props) {
  return props.direction === 'left' || props.direction === 'right' ? 'rotate(90deg)' : 'rotate(0)';
}, function (props) {
  return props.color;
}, function (_ref2) {
  var direction = _ref2.direction;
  return direction === 'up' && (0, _lib.readFromLocalStorage)('DropdownSelect__isSelecting') || direction === 'down' && (0, _lib.readFromLocalStorage)('DropdownSelect__isSelecting') ? "transform: translateY(-50%) rotate(-46deg); animation: none;" : "animation: 200ms ease 0s 1 normal forwards running animation-before-" + animationsMap[direction];
}, function (_ref3) {
  var direction = _ref3.direction;
  return direction === 'up' && (0, _lib.readFromLocalStorage)('DropdownSelect__isSelecting') || direction === 'down' && (0, _lib.readFromLocalStorage)('DropdownSelect__isSelecting') ? "transform: translateY(-50%) rotate(46deg);" : "animation: 200ms ease 0s 1 normal forwards running animation-after-" + animationsMap[direction] + ";";
});
//# sourceMappingURL=IconAnimatedArrow.js.map