'use strict';

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

var _NavigationItemList = require('./NavigationItemList');

var _NavigationItemList2 = _interopRequireDefault(_NavigationItemList);

var _NavigationItemListStack = require('./NavigationItemListStack');

var _NavigationItemListStack2 = _interopRequireDefault(_NavigationItemListStack);

var _NavigationBar = require('./NavigationBar');

var _NavigationBar2 = _interopRequireDefault(_NavigationBar);

var _userSpacing = require('../../../extensions/userSpacing');

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

var NavigationItem = _styledComponents2.default.div.withConfig({ displayName: 'NavigationItem' }).withConfig({
  displayName: 'NavigationItem'
})(['border:0;padding-bottom:calc(', ' + 20px);margin-top:', ';line-height:1.5;opacity:1;transition:all 0.2s ease;position:relative;cursor:pointer;color:inherit;font-size:1em;font-weight:200;pointer-events:', ';&::before{content:\'\';opacity:', ';background:', ';width:104%;height:', ';display:block;position:absolute;bottom:0;top:auto;left:50%;transform:translateX(-50%);transition:height 0.2s ease,opacity 0.2s ease;}', ' &,', ' &{&:before{background:', ';}}', ':not(:last-child) &{padding-bottom:calc(', ' + 10px);}', ' &{font-size:0.8em;}', ';'], (0, _userSpacing.calcBottomOffset)(1.5), (0, _userSpacing.calcTopOffset)(1.5), function (_ref) {
  var disabled = _ref.disabled;
  return disabled ? 'none' : 'inherit';
}, function (_ref2) {
  var active = _ref2.active;
  return active ? 1 : 0;
}, (0, _themeGet2.default)('colors.primary.dark'), function (_ref3) {
  var active = _ref3.active;
  return active ? '5px' : 0;
}, _NavigationBar2.default.Dark, _NavigationBar2.default.Sub.Dark, (0, _themeGet2.default)('colors.primary.default'), _NavigationItemList2.default, (0, _userSpacing.calcBottomOffset)(1.5), _NavigationItemList2.default.Small, function (_ref4) {
  var active = _ref4.active,
      disabled = _ref4.disabled;
  return active || disabled || (0, _styledComponents.css)(['&:focus,&:active{opacity:0.7;}&:hover::before{opacity:0.25;}&:hover,&:focus,&:active{&:before{height:5px;}}']);
});

NavigationItem.propTypes = {
  /**
   * Adds a class name to the element.
   */
  className: _propTypes2.default.string,

  /**
   * Adds an id to the element.
   */
  id: _propTypes2.default.string,
  /**
   * Determines if a navigation item is active or not
   */
  active: _propTypes2.default.bool,
  /**
   * Determines if a navigation item is disabled or not
   */
  disabled: _propTypes2.default.bool
};

NavigationItem.defaultProps = {
  className: null,
  id: null,
  active: false,
  disabled: false
};

exports.default = NavigationItem;