import React from 'react';
import PropTypes from 'prop-types';
import NavigationList from './navigation-list';
import MastheadLinks from './masthead-links';
import 'reset-css/reset.css';
import '../grid/grid';
import '../media-queries/media-queries';
import { urls as defaultUrls, urlsPropShape } from '../../constants';
import css from './masthead.css';

const MastheadNavigation = ({ menuIsOpen, urls, showNavToggle }) => {
  return (
    <nav className={css['ds-masthead-nav-lists']}>
      {/* Allows for tabbing from the menu disclosure into the navigation list. */}
      <div id='menu-nav' tabIndex='-1' role='presentation' />
      <ul className='link-groups'>
        {menuIsOpen && <MastheadLinks inverse />}
        <NavigationList
          type='opinion'
          baseUrl={urls.economist}
          menuIsOpen={menuIsOpen}
          showNavToggle={showNavToggle}
          listIsOpen
        />
        <NavigationList
          type='current-topics'
          baseUrl={urls.economist}
          menuIsOpen={menuIsOpen}
          showNavToggle={showNavToggle}
          listIsOpen
        />
        <NavigationList
          type='world'
          baseUrl={urls.economist}
          menuIsOpen={menuIsOpen}
          showNavToggle={showNavToggle}
          listIsOpen={false}
        />
        <NavigationList
          type='in-depth'
          baseUrl={urls.economist}
          menuIsOpen={menuIsOpen}
          showNavToggle={showNavToggle}
          listIsOpen={false}
        />
        <NavigationList
          type='business-and-economics'
          baseUrl={urls.economist}
          menuIsOpen={menuIsOpen}
          showNavToggle={showNavToggle}
          listIsOpen={false}
        />
        <NavigationList
          type='culture-and-society'
          baseUrl={urls.economist}
          menuIsOpen={menuIsOpen}
          showNavToggle={showNavToggle}
          listIsOpen={false}
        />
        <NavigationList
          type='more'
          baseUrl={urls.economist}
          menuIsOpen={menuIsOpen}
          showNavToggle={showNavToggle}
          listIsOpen={false}
        />
      </ul>
    </nav>
  );
};

MastheadNavigation.defaultProps = {
  urls: defaultUrls,
};

MastheadNavigation.propTypes = {
  menuIsOpen: PropTypes.bool.isRequired,
  urls: urlsPropShape,
  showNavToggle: PropTypes.bool.isRequired,
};

export default MastheadNavigation;
