import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';

import Navbar from '.';
import NavbarHeader from './NavbarHeader';
import NavbarItem from './NavbarItem';
import { Attendees, LeaveMeeting, Information } from '../icons';
import Flex from '../Flex';
import { lightTheme } from '../../../theme/';
import { GlobalStyles } from '../../../theme/GlobalStyles';
import * as NavbarStories from './Navbar.stories.tsx';

<Meta of={NavbarStories} />

# Navbar

The Navbar component displays a vertical menu with navigation icon buttons and labels. Navbar is constructed using the NavbarHeader and NavbarItem components.

`NavbarItem` support tooltips by adding a `data-tooltip` property. Adding a `data-tooltip-position` property controls the tooltip position. It will render the `label` as the tooltip, unless a `tooltipContent` prop is passed.

## Importing

```javascript
import {
  Navbar,
  NavbarHeader,
  NavbarItem,
} from 'amazon-chime-sdk-component-library-react';
```

## Example

### Navbar Component

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Navbar flexDirection="column" container css="height: 50vh">
      <NavbarHeader onClose={() => {}} />
      <Flex>
        <NavbarItem
          icon={<Information />}
          onClick={() => {}}
          label="Bridge Information"
        />
        <NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
      </Flex>
      <Flex marginTop="auto">
        <NavbarItem
          icon={<LeaveMeeting />}
          onClick={() => {}}
          label="Leave Meeting"
          isSelected
        />
      </Flex>
    </Navbar>
  </Canvas>
</ThemeProvider>

```jsx
<Navbar flexDirection="column" container height="10%">
  <NavbarHeader onClose={() => {}} />
  <Flex>
    <NavbarItem
      icon={<Information />}
      onClick={() => {}}
      label="Bridge Information"
    />
    <NavbarItem icon={<Attendees />} onClick={() => {}} label="Attendees" />
  </Flex>
  <Flex marginTop="auto">
    <NavbarItem
      icon={<LeaveMeeting />}
      onClick={() => {}}
      label="Leave Meeting"
    />
  </Flex>
</Navbar>
```

## Props

### Navbar Props

<ArgTypes of={Navbar} />

# NavbarHeader

NavbarHeader component is displayed only in the mobile view with screen size less than `theme.mediaQueries.min.md` value defined in your theme (defaults to 768px).

It gives a title to Navbar and also a close icon button to close the Navbar in mobile view.

# Example

```javascript
<NavbarHeader title="Menu" onClose={() => {}} />
```

### NavbarHeader Props

<ArgTypes of={NavbarHeader} />

# NavbarItem

The NavbarItem component displays a single row in the Navbar. It is made up of `ControlBarItem` which acts as a button and a label.

The label is displayed only on smaller screens with width defined by `theme.mediaQueries.min.md` value in your theme (defaults to 768px), else only icon button is shown.

# Example

### NavbarItem component

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <NavbarItem
    icon={<Information />}
    onClick={() => {}}
    label="Bridge Information"
  />
</ThemeProvider>

```javascript
<NavbarItem
  icon={<Information />}
  onClick={() => {}}
  label="Bridge Information"
/>
```

### NavbarItem Props

<ArgTypes of={NavbarItem} />