"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _templateObject = _taggedTemplateLiteral(["\n  background-color: rgba(1, 1, 1, 0.1);\n  color: white;\n"], ["\n  background-color: rgba(1, 1, 1, 0.1);\n  color: white;\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _Colors = require("../../Colors");

var Color = _interopRequireWildcard(_Colors);

var _Events = require("../Events");

var _Link = require("../Link");

var _Link2 = _interopRequireDefault(_Link);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var DefaultButton = (0, _styledComponents2.default)("button", "input[type=submit]").withConfig({
  displayName: "Button__DefaultButton"
})(["display:inline-block;font-size:1rem;font-weight:600;padding:0 1rem;border-radius:var(--smBorderRadius);text-align:center;cursor:pointer;outline:none;transition:all 0.3s ease;flex:0 0 auto;border-radius:", ";height:", ";font-size:", ";padding:", ";color:", ";border:", ";background-color:", ";line-height:", ";&:hover{transform:scale(0.95);transition:all 0.3s ease;}a{color:inherit;}"], function (props) {
  return props.big ? "var(--lgBorderRadius)" : "var(--smBorderRadius)";
}, function (props) {
  return props.big ? "3.5rem" : "2.5rem";
}, function (props) {
  return props.big ? "1.25rem" : "1rem";
}, function (props) {
  return props.big ? "0 2rem" : "0 1rem";
}, function (props) {
  return props.textColor ? props.textColor : "white";
}, function (props) {
  return props.outline ? props.bgColor ? "2px solid " + props.bgColor : "2px solid " + Color.cerulean : "transparent";
}, function (props) {
  return props.outline ? "transparent" : props.bgColor ? props.bgColor : Color.cerulean;
}, function (props) {
  return props.outline ? "2rem" : "2.5rem";
});

var handleClick = function handleClick(props) {
  return function () {
    if (props.onClick) {
      props.onClick();
    }
    if (props.event) {
      (0, _Events.trackButtonEvent)(props.event);
    }
  };
};

var SecondaryButton = DefaultButton.extend(_templateObject);

var Button = function Button(props) {
  var href = props.href,
      target = props.target,
      download = props.download,
      rel = props.rel;

  if (href) {
    return _react2.default.createElement(
      _Link2.default,
      { href: href, target: target, download: download, rel: rel, onClick: handleClick(props) },
      _react2.default.createElement(
        DefaultButton,
        {
          big: props.big,
          bgColor: props.bgColor,
          outline: props.outline,
          textColor: props.textColor },
        props.children
      )
    );
  }
  return props.secondary ? _react2.default.createElement(
    SecondaryButton,
    {
      onClick: handleClick(props) },
    props.children
  ) : _react2.default.createElement(
    DefaultButton,
    {
      big: props.big,
      bgColor: props.bgColor,
      outline: props.outline,
      textColor: props.textColor,
      type: props.type,
      value: props.value,
      onClick: handleClick(props) },
    props.children
  );
};

exports.default = Button;