import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';

### Usage

The MainNavigation is used across all applications, it is the starting point of the application and offers the top level navigation items.

import { List, ListItem } from '../List';

#### When to use

<List kind="bullet">
  <ListItem kind="checkmark">Internal and external applications</ListItem>
  <ListItem kind="checkmark">
    The MainNavigation can be used for both internal and external websites.
  </ListItem>
</List>

#### When not to use

<List kind="bullet">
  <ListItem kind="cross">
    External websites (wfp.org, etc.): The header might not be the right
    solution for external websites. Please consult the #ux-ui channel on Slack.
  </ListItem>
  <ListItem kind="cross">
    Do not use WFP's logo inside the MainNavigation.
  </ListItem>
</List>

```js
import { MainNavigation, MainNavigationItem } from '@wfp/ui';
```

### SubNavigation

It can be combined with a Dropdown SubNavigation.

```js
import {
  SubNavigation,
  SubNavigationHeader,
  SubNavigationTitle,
  SubNavigationFilter,
  SubNavigationContent,
  SubNavigationList,
  SubNavigationGroup,
  SubNavigationItem,
} from '@wfp/ui';
```

The maximum number of items is 6 to 8 items depending on the average word length.

### Closing the SubNavigation

#### Using `refs`

From outside (using react-router, etc.) using `refs` a function can be triggered every time a route changes.

##### Using react-router (withRouter)

```js
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

class Parent extends Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
  };

  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  // Depending on your usecase/performance use getDerivedStateFromProps instead
  componentDidUpdate(prevProps, prevState) {
    if (!prevState.locaction && this.props.locaction) {
      this.closeMenu();
    }
  }

  openFirstMenu = () => {
    this.child.current.onChangeSub('toggle', 0);
  };

  closeMenu = () => {
    this.child.current.onChangeSub('close');
  };

  render() {
    return (
      <div>
        <MainNavigation ref={this.child} />
        <button onClick={this.openFirstMenu}>Open first menu</button>
        <button onClick={this.closeMenu}>Close everything</button>
      </div>
    );
  }
}

const ParentWithRouter = withRouter(Parent);
```

##### Trigger with external button

```js
class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  closeMenu = () => {
    this.child.current.onChangeSub('close');
  };

  render() {
    return (
      <div>
        <MainNavigation ref={this.child} />
        <button onClick={this.closeMenu}>Close everything</button>
      </div>
    );
  }
}
```

#### Using function inside `children`

From the `children` any change can be manually triggered by a function

```js
 <MainNavigation>
    {({ onChangeSub }) => {
      return (
        <React.Fragment>
          <MainNavigationItem
            subNavigation={
              <div>
                <Link
                  onClick={() => onChangeSub('close')}>
                  Close Demo
                </Link>
              </div>
            }>
            <User ellipsis title="Max Mustermann" />
          </MainNavigationItem>
        </React.Fragment>
      );
    }}
  </MainNavigation>
));
```

### SubNavigation for the User

An `User` `MainNavigationItem` consists out of the `User` component and a `SubNavigation`.

```html
  <MainNavigationItem
  className="wfp--main-navigation__user"
  subNavigation={
    <SubNavigation>
      <SubNavigationHeader>
        <SubNavigationTitle>Welcome Max!</SubNavigationTitle>
        <SubNavigationLink>
          <Button secondary small>Logout</Button>
        </SubNavigationLink>
      </SubNavigationHeader>
      <SubNavigationContent>
       {/* Additional content */}
      </SubNavigationContent>
    </SubNavigation>
  }>
  <User ellipsis title="Max Mustermann" />
</MainNavigationItem>
```
