import React from 'react';
import PropTypes from 'prop-types';
import NavigationLink from '../navigation-link/navigation-link';
import NavigationControl from './navigation-control';
import { urls, getNavigationListData } from '../../constants';
import 'reset-css/reset.css';
import '../color/color';
import '../rule/rule';
import '../typography/typography';

const renderListItem = item => {
  return (
    <li key={item.name.toString()}>
      <NavigationLink inverse href={item.url} text={item.name} />
    </li>
  );
};

const NavigationList = ({
  type,
  baseUrl,
  menuIsOpen,
  showNavToggle,
  listIsOpen,
}) => {
  let navigationListComponent;
  let navigationListName;
  let mobileOnly = false;
  const navigationListData = getNavigationListData(baseUrl);
  switch (type) {
    case 'opinion':
      navigationListComponent = (
        <>
          {navigationListData[type].map(item => (
            <li key={item.name.toString()}>
              <NavigationLink inverse href={item.url} text={item.name} />
            </li>
          ))}
          <li className='ds-navigation-inner-list-desktop-only'>
            <h2 className='ds-navigation-list__header'>Current topics</h2>
            <ul className='ds-navigation-list-items--current-topics'>
              {navigationListData['current-topics'].map(item => (
                <li key={item.name.toString()}>
                  <NavigationLink inverse href={item.url} text={item.name} />
                </li>
              ))}
            </ul>
          </li>
        </>
      );
      navigationListName = 'Opinion';
      break;
    case 'current-topics':
      mobileOnly = true;
      navigationListComponent = navigationListData[type].map(item =>
        renderListItem(item),
      );
      navigationListName = 'Current topics';
      break;
    case 'world':
      navigationListComponent = navigationListData[type].map(item =>
        renderListItem(item),
      );
      navigationListName = 'World';
      break;
    case 'in-depth':
      navigationListComponent = navigationListData[type].map(item =>
        renderListItem(item),
      );
      navigationListName = 'In depth';
      break;
    case 'business-and-economics':
      navigationListComponent = navigationListData[type].map(item =>
        renderListItem(item),
      );
      navigationListName = 'Business & economics';
      break;
    case 'culture-and-society':
      navigationListComponent = navigationListData[type].map(item =>
        renderListItem(item),
      );
      navigationListName = 'Culture & society';
      break;
    case 'more':
      navigationListComponent = navigationListData[type].map(item =>
        renderListItem(item),
      );
      navigationListName = 'More';
      break;
    default:
      return null;
  }
  return (
    <NavigationControl
      title={navigationListName}
      type={type}
      menuIsOpen={menuIsOpen}
      showNavToggle={showNavToggle}
      listIsOpen={listIsOpen}
      hideOnDesktop={mobileOnly}
    >
      {navigationListComponent}
    </NavigationControl>
  );
};

NavigationList.defaultProps = {
  baseUrl: urls.economist,
  listIsOpen: false,
};

NavigationList.propTypes = {
  baseUrl: PropTypes.string,
  menuIsOpen: PropTypes.bool.isRequired,
  showNavToggle: PropTypes.bool.isRequired,
  type: PropTypes.oneOf([
    'opinion',
    'current-topics',
    'world',
    'in-depth',
    'business-and-economics',
    'culture-and-society',
    'more',
  ]).isRequired,
  listIsOpen: PropTypes.bool,
};

export default NavigationList;
