"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = useNavigationStyle;
exports.navigationStyle = void 0;

var _ThemeProvider = require("../ThemeProvider");

var navigationStyle = function navigationStyle(_ref, _ref2) {
  var _ref$isSticky = _ref.isSticky,
      isSticky = _ref$isSticky === void 0 ? false : _ref$isSticky,
      isActive = _ref.isActive,
      isSubmenuItem = _ref.isSubmenuItem,
      clickable = _ref.clickable,
      unstyled = _ref.unstyled;
  var zIndices = _ref2.zIndices,
      sizes = _ref2.sizes,
      colors = _ref2.colors;
  var style = {
    bg: 'navBg',
    boxShadow: 'topNav',
    minHeight: 'header',
    height: 'header',
    width: '100%',
    px: ['spacing', 'spacing', 'spacing-lg']
  };

  if (isSticky) {
    style.position = 'sticky';
    style.top = 0;
    style.zIndex = zIndices.sticky;
  }

  return {
    style: style,
    navItem: {
      display: 'flex',
      alignItems: 'center',
      flex: 1,
      minHeight: 50,
      mb: !isSubmenuItem && 3,
      textAlign: 'left',
      position: 'relative',
      color: isActive && 'activeLink',
      fontWeight: isActive && !isSubmenuItem && 'bold',
      cursor: clickable && 'pointer'
    },
    activeBar: {
      position: 'absolute',
      width: 1,
      rounded: 'full',
      roundedTopLeft: 0,
      roundedBottomLeft: 0,
      height: '75%',
      boxSizing: 'contain-box',
      backgroundColor: 'primary.500',
      left: "-".concat(sizes.canvas.spacing)
    },
    navItemMedia: {
      textAlign: 'center',
      _even: !unstyled && {
        path: {
          fill: isActive ? colors.primary[500] : colors.bodyText
        }
      },
      _odd: !unstyled && {
        path: {
          fill: isActive ? colors.primary[500] : colors.bodyText
        }
      }
    }
  };
};

exports.navigationStyle = navigationStyle;

function useNavigationStyle() {
  var _theme$styles;

  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme !== null && theme !== void 0 && (_theme$styles = theme['styles']) !== null && _theme$styles !== void 0 && _theme$styles.navigation ? theme['styles'].navigation(props, theme) : navigationStyle(props, theme);
  return {
    root: styles.style,
    navItem: styles.navItem,
    activeBar: styles.activeBar,
    navItemMedia: styles.navItemMedia
  };
}
//# sourceMappingURL=styles.js.map