"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _clsx = _interopRequireDefault(require("clsx"));
var _styles = require("@material-ui/core/styles");
var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
var _Icon = _interopRequireDefault(require("@material-ui/core/Icon"));
var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var textShadow = '0px 0px 4px rgba(255, 255, 255, 0.8)';
var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    '@keyframes left': {
      '0%': {
        transform: 'translateX(0)'
      },
      '50%': {
        transform: 'translateX(100%)'
      },
      '100%': {
        transform: 'translateX(0)'
      }
    },
    '@keyframes right': {
      '0%': {
        transform: 'translateX(0)'
      },
      '50%': {
        transform: 'translateX(-100%)'
      },
      '100%': {
        transform: 'translateX(0)'
      }
    },
    '@keyframes top': {
      '0%': {
        transform: 'translateY(0)'
      },
      '50%': {
        transform: 'translateY(100%)'
      },
      '100%': {
        transform: 'translateY(0)'
      }
    },
    '@keyframes bottom': {
      '0%': {
        transform: 'translateY(0)'
      },
      '50%': {
        transform: 'translateY(-100%)'
      },
      '100%': {
        transform: 'translateY(0)'
      }
    },
    popoverRoot: _defineProperty({}, theme.breakpoints.down('xs'), {
      display: 'none'
    }),
    container: {
      position: 'relative',
      display: 'flex',
      alignItems: 'center'
    },
    popper: {
      zIndex: 2
    },
    topContainer: function topContainer(_ref) {
      var offset = _ref.offset,
        perpendicularOffset = _ref.perpendicularOffset;
      return {
        top: -offset,
        right: perpendicularOffset,
        flexDirection: 'column-reverse'
      };
    },
    leftContainer: function leftContainer(_ref2) {
      var offset = _ref2.offset,
        perpendicularOffset = _ref2.perpendicularOffset;
      return {
        right: offset,
        top: perpendicularOffset,
        flexDirection: 'row-reverse'
      };
    },
    bottomContainer: function bottomContainer(_ref3) {
      var offset = _ref3.offset,
        perpendicularOffset = _ref3.perpendicularOffset;
      return {
        bottom: -offset,
        right: perpendicularOffset,
        flexDirection: 'column'
      };
    },
    rightContainer: function rightContainer(_ref4) {
      var offset = _ref4.offset,
        perpendicularOffset = _ref4.perpendicularOffset;
      return {
        top: perpendicularOffset,
        left: offset,
        flexDirection: 'row'
      };
    },
    animation: {
      animation: '$left 1s infinite',
      display: 'flex',
      alignItems: 'center',
      '&:before': {
        fontSize: '1.5em'
      }
    },
    topAnimation: {
      animationName: '$top'
    },
    rightAnimation: {
      animationName: '$right'
    },
    bottomAnimation: {
      animationName: '$bottom'
    },
    leftAnimation: {
      animationName: '$left'
    },
    icon: {
      margin: '0 5px',
      textShadow: textShadow
    },
    leftIcon: {
      transform: 'rotate(0deg)'
    },
    topIcon: {
      transform: 'rotate(90deg)'
    },
    rightIcon: {
      transform: 'rotate(180deg)'
    },
    bottomIcon: {
      transform: 'rotate(270deg)'
    },
    typography: _defineProperty({
      textAlign: 'center',
      whiteSpace: 'nowrap'
    }, theme.breakpoints.down('xs'), {
      fontSize: '1rem'
    }),
    hintText: {
      textShadow: textShadow
    }
  };
}, {
  name: 'CallToAction'
});
var CallToAction = function CallToAction(props) {
  var anchorRef = props.anchorRef,
    offsetDirection = props.offsetDirection,
    label = props.label,
    width = props.width,
    className = props.className;
  var classes = useStyles(props);
  if (!anchorRef || width === 'xs') {
    return null;
  }
  return /*#__PURE__*/_react["default"].createElement(_Popper["default"], {
    className: classes.popper,
    open: true,
    anchorEl: anchorRef,
    placement: offsetDirection
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.container, classes["".concat(offsetDirection, "Container")], className)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.animation, classes["".concat(offsetDirection, "Animation")])
  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
    className: (0, _clsx["default"])(classes.icon, classes["".concat(offsetDirection, "Icon")])
  }, "forward")), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: classes.hintText,
    variant: "h5"
  }, label)));
};
CallToAction.defaultProps = {
  offset: 100,
  perpendicularOffset: 0,
  className: ''
};
var _default = exports["default"] = (0, _withWidth["default"])({
  initialWidth: 'lg'
})(CallToAction);