import React from 'react';
import PropTypes from 'prop-types';
import RoutingStackDelegate from
 'terra-navigation-layout/lib/RoutingStackDelegate';
import ComponentsUtils from './ComponentsUtils';

import MenuList from '../common/menu/MenuList';
import { componentConfigPropType, siteConfigPropType } from './ComponentsProptypes';

const menuText = {
  pages: 'Components',
  tests: 'Tests',
};

const subMenuText = {
  pages: '',
  tests: 'Tests',
};

const propTypes = {
  /**
   * The RoutingStateDelegate instance provided by the terra-navigation-layout.
   */
  routingStackDelegate: RoutingStackDelegate.propType,
  /**
   * Generated by configureApp.jsx: The array of components that should be displays.
   */
  config: PropTypes.oneOfType([siteConfigPropType, componentConfigPropType]),
  /**
   * The path root to prepend to the component navigation.
   */
  pathRoot: PropTypes.string,
  /**
   * The component example type to generate components for.
   */
  exampleType: PropTypes.string,
  /**
   * Whether or not the menu is a subMenu.
   */
  isSubMenu: PropTypes.bool,
};

const defaultProps = {
  routingStackDelegate: undefined,
  config: [],
  pathRoot: null,
  exampleType: '',
  isSubMenu: false,
};

const ComponentsMenu = ({ routingStackDelegate, config, exampleType, pathRoot, isSubMenu }) => {
  let headerText = menuText[`${exampleType}`];
  let links;

  if (isSubMenu) {
    headerText = `${config.name} ${subMenuText[exampleType]}`;
    links = ComponentsUtils.generateSubMenuLinks(config, exampleType, pathRoot);
  } else {
    links = ComponentsUtils.generateMenuLinks(config, exampleType, pathRoot);
  }

  return (
    <MenuList
      headerText={headerText}
      routingStackDelegate={routingStackDelegate}
      links={links}
    />
  );
};

ComponentsMenu.propTypes = propTypes;
ComponentsMenu.defaultProps = defaultProps;

export default ComponentsMenu;