'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactRouterDom = require('react-router-dom');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TextLink = exports.TextLink = (0, _styledComponents2.default)(_reactRouterDom.Link).withConfig({
  displayName: 'Link__TextLink'
})(['color: ', ';font-family: ', ';text-decoration: none;cursor: pointer;transition: all 0.2 ease;white-space: nowrap;position: relative;height: auto;margin: auto;&:focus {outline: none;}&:active {color: ', ';}&::after {content: "";background: ', ';border-radius: ', ';height: 1px;width: 100%;position: absolute;bottom: -0.1em;left: 0;transition: height 0.15s ease, width 0.15s ease, left 0.15s ease, opacity 0.15s ease 0.15s;}&:hover::after,&:focus::after {height: calc(100% + 0.2em);width: calc(100% + 0.6em);left: -0.3em;opacity: 0.125;transition: height 0.15s ease, width 0.15s ease, left 0.15s ease, opacity 0s ease;}'], function (_ref) {
  var theme = _ref.theme;
  return theme.link.fg;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.link.fontFamily;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.link.activeFG;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.link.fg;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.link.bubbleBorderRadius;
});

var IconLink = (0, _styledComponents2.default)(TextLink).withConfig({
  displayName: 'Link__IconLink'
})(['text-decoration: none;&::after {opacity: 0;}']);

// notice: this goes back to ReactLink, not TextLink as above
var WrapLink = (0, _styledComponents2.default)(_reactRouterDom.Link).withConfig({
  displayName: 'Link__WrapLink'
})(['text-decoration: none;']);

var inferType = function inferType(children) {
  if (children === null) {
    return 'wrap';
  }

  if (typeof children === 'string') {
    return 'text';
  }

  if (children.type && children.type.displayName === 'Icon') {
    return 'icon';
  }

  return 'wrap';
};

var Link = function (_React$Component) {
  _inherits(Link, _React$Component);

  function Link() {
    var _ref6;

    var _temp, _this, _ret;

    _classCallCheck(this, Link);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref6 = Link.__proto__ || Object.getPrototypeOf(Link)).call.apply(_ref6, [this].concat(args))), _this), _this.getComponentType = function () {
      var type = _this.props.type || inferType(_this.props.children);
      switch (type) {
        case 'wrap':
          return WrapLink;
        case 'icon':
          return IconLink;
        default:
          return TextLink;
      }
    }, _this.handleClick = function (event) {
      var _this$props = _this.props,
          onClick = _this$props.onClick,
          to = _this$props.to;
      // if the user isn't using this link to navigate,
      // prevent default navigation

      if (onClick && to === '#') {
        event.preventDefault();
        onClick(event);
      }
    }, _this.childrenWithProps = function (extraProps) {
      var children = _this.props.children;

      if (!children) {
        return null;
      }
      if (typeof children === 'string') {
        return children;
      }
      return _react2.default.Children.map(children, function (child) {
        return _react2.default.cloneElement(child, extraProps);
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  // adds all non-children props to children


  _createClass(Link, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          to = _props.to,
          exact = _props.exact,
          children = _props.children;

      var Component = this.getComponentType();

      return _react2.default.createElement(_reactRouterDom.Route, {
        path: to,
        exact: exact,
        children: function children(_ref7) {
          var match = _ref7.match;
          return _react2.default.createElement(
            Component,
            { to: to, onClick: _this2.handleClick },
            _this2.childrenWithProps({ active: !!match })
          );
        }
      });
    }
  }]);

  return Link;
}(_react2.default.Component);

Link.propTypes = {
  to: _propTypes2.default.string,
  children: _propTypes2.default.node,
  exact: _propTypes2.default.bool,
  onClick: _propTypes2.default.func,
  // whether the contents should be treated as text (styled) or not (untouched)
  type: _propTypes2.default.oneOf(['text', 'icon', 'wrap'])
};
Link.defaultProps = {
  to: '#',
  children: null,
  exact: false,
  onClick: function onClick() {
    return null;
  },
  type: null
};


Link.usage = '\n# Link\n\nLinks are meant to be used with React Router v4+. They provide a few features besides styling:\n\n* use the `to` prop instead of `href`; better syntax.\n* pass the `exact` prop to indicate that this link should only be active when the URL matches exactly.\n* any children are passed an `active` prop, which indicates whether the link is currently being visited.\n* pass `type="icon"` or `type="wrap"` to turn customize text styling within the link\n\n```\n<Link to="/about" exact>Go to About Page</Link>\n```\n';

exports.default = Link;