import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Bar from './Bar';
import NavButton from './NavButton';
import NavDropdown from './NavDropdown';
import NavItemWrapper from './NavItemWrapper';
import NavItemSeparation from './NavItemSeparation';

import './nav-bar.scss';

const propTypes = {
  /** @ignore */
  className: PropTypes.string,
  /**
   * Make it width full size
   */
  level: PropTypes.oneOf([1, 2]),
  size: PropTypes.oneOf(['null', 'lg', 'md', 'sm', 'xs'])
};
const defaultProps = {
  className: undefined,
  level: 1,
  size: 'lg'
};

const NavBar = ({ className, level, size, ...props }) => (
  <div
    className={className}
    styleName={`${classNames(
      'base', {
        [`level-wrapper-${level}`]: level,
        [size]: size
      }
    )}`}
    {...props}
  />
);

NavBar.propTypes = propTypes;
NavBar.defaultProps = defaultProps;
NavBar.Bar = Bar;
NavBar.NavButton = NavButton;
NavBar.NavDropdown = NavDropdown;
NavBar.NavItemWrapper = NavItemWrapper;
NavBar.NavItemSeparation = NavItemSeparation;

export default NavBar;
