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

var _templateObject;

import React, { useEffect } from 'react';
import { useBoolean, readFromLocalStorage } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { Config } from '../../../config';
export var IconAnimatedArrow = (_ref) => {
  var {
    direction = 'down',
    color = Config.theme.palette.primary,
    disableAnimation = readFromLocalStorage('DropdownSelect__isSelecting')
  } = _ref;
  var [show, setShow] = useBoolean(false);
  useEffect(() => {
    var timeout = setTimeout(setShow.on, 200);
    return () => clearTimeout(timeout);
  }, [disableAnimation, direction, setShow.on]);
  return /*#__PURE__*/React.createElement(Container, {
    style: {
      opacity: show || disableAnimation ? 1 : 0
    },
    color: color,
    direction: direction
  });
};
// TODO: left and right
var animationsMap = {
  up: 'up',
  right: 'right',
  down: 'down',
  left: 'left'
};
var Container = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), props => props.direction === 'left' || props.direction === 'right' ? 'rotate(90deg)' : 'rotate(0)', props => props.color, (_ref2) => {
  var {
    direction
  } = _ref2;
  return direction === 'up' && readFromLocalStorage('DropdownSelect__isSelecting') || direction === 'down' && readFromLocalStorage('DropdownSelect__isSelecting') ? "transform: translateY(-50%) rotate(-46deg); animation: none;" : "animation: 200ms ease 0s 1 normal forwards running animation-before-" + animationsMap[direction];
}, (_ref3) => {
  var {
    direction
  } = _ref3;
  return direction === 'up' && readFromLocalStorage('DropdownSelect__isSelecting') || direction === 'down' && readFromLocalStorage('DropdownSelect__isSelecting') ? "transform: translateY(-50%) rotate(46deg);" : "animation: 200ms ease 0s 1 normal forwards running animation-after-" + animationsMap[direction] + ";";
});
//# sourceMappingURL=IconAnimatedArrow.js.map