"use strict";

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

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

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

var _index = require("../../../primitives/box/index");

var _typography = require("../../../mixins/typography");

var _textIconButton = require("./text-icon-button.proptypes");

var _smallArrowRight = require("../../icon/small-arrow-right");

var _add = require("../../icon/add");

var _textButtonWithIcon = require("./text-button-with-icon.css-rules");

var _focus = require("../../../mixins/focus");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var BaseAnchor = _styledComponents["default"].a.attrs(function () {
  return {
    bold: 'true'
  };
}).withConfig({
  displayName: "BaseAnchor",
  componentId: "sc-1hy3htq-0"
})(["&&{color:", ";font-family:", ";font-weight:", ";text-decoration:none;cursor:pointer;svg{vertical-align:middle;}", "}", "{& > div{box-shadow:", " ", ",", ";border-radius:", ";}svg > g{fill:", ";}}&:hover{color:", ";text-decoration:underline;svg > g{fill:", ";}}&:active{color:", ";text-decoration:underline;svg > g{fill:", ";}}"], _textButtonWithIcon.getLinkColor, _typography.getFontFamily, _typography.getFontWeight, (0, _focus.getBaseFocusState)({
  hoverTransition: false,
  activeTransition: false
}), _focus.FOCUS_VISIBLE_SELECTOR, (0, _focus.focusedBorderShadow)({
  inset: false
}), _focus.focusedBorderColor, _focus.focusedBoxShadow, _focus.focusedBorderRadius, _textButtonWithIcon.getLinkActiveColor, _textButtonWithIcon.getLinkHoverColor, _textButtonWithIcon.getLinkHoverColor, _textButtonWithIcon.getLinkActiveColor, _textButtonWithIcon.getLinkActiveColor);

var getIcon = function getIcon(icon) {
  switch (icon) {
    case 'add':
      return _react["default"].createElement(_add.Add, null);

    case 'small-arrow-right':
      return _react["default"].createElement(_smallArrowRight.SmallArrowRight, null);

    default:
      return null;
  }
};
/**
 * Important: Due to our dependence on Icomoon, we cannot have an element
 * whose class name contains `icon-` in the middle.
 * We need the `Icon` part to be at the end instead of at the start or middle
 * because React auto-generates class names based on the component's displayName.
 */


var TextButtonWithIcon = function TextButtonWithIcon(props) {
  return _react["default"].createElement(BaseAnchor, {
    href: props.href,
    target: props.target
  }, _react["default"].createElement(_index.Box, {
    stacked: "row",
    align: "center"
  }, props.position === 'left' && _react["default"].createElement(_index.Box, {
    spacing: "mr1",
    stacked: "row",
    align: "center"
  }, getIcon(props.icon)), _react["default"].createElement(_index.Box, null, props.children), props.position === 'right' && _react["default"].createElement(_index.Box, {
    spacing: "ml1",
    stacked: "row",
    align: "center"
  }, getIcon(props.icon))));
};

exports.TextButtonWithIcon = TextButtonWithIcon;
TextButtonWithIcon.displayName = 'TextButtonWithIcon';
TextButtonWithIcon.propTypes = _textIconButton.textIconButtonProptypes;