import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { BASIC } from '../_utils/taxonomy'
import { Drawer, DropdownButton, Menu, TopBar } from './index'
import { LoggedInTopBar, LoggedOutTopBar, SimpleTopBar } from './TopBar.example'

<Meta title={`${BASIC}/TopBar`} />

# **Top/Tab Bar**

<Canvas>
  <Story name="Default">
    <SimpleTopBar />
  </Story>
</Canvas>

<Canvas>
  <Story name="Logged out">
    <LoggedOutTopBar />
  </Story>
</Canvas>

<Canvas>
  <Story name="Logged in">
    <LoggedInTopBar />
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { Avatar } from '@blablacar/ui-library/build/avatar'
import { TopBar, DropdownButton, Drawer, Menu } from '@blablacar/ui-library/build/topBar'

export const LoggedOutTopBar = (): JSX.Element => {
  const [drawerOpened, setDrawerOpened] = useState(false)

  return (
    <Fragment>
      <TopBar
        zIndex={50}
        leftItem={(
          <DropdownButton onClick={(): void => setDrawerOpened(!drawerOpened)}>
            <Avatar
              isSmall
              image=""
            />
          </DropdownButton>
        )}
      />
      <Drawer
        zIndex={40}
        open={drawerOpened}
        onClose={(): void => setDrawerOpened(false)}>
        <Menu>
          <ItemChoice label="Log in"/>
          <ItemChoice label="Sign up"/>
        </Menu>
      </Drawer>
    </Fragment>
  )
}
```

### TopBar props
<ArgsTable of={TopBar} />

### DropdownButton props
<ArgsTable of={DropdownButton} />

### Drawer props
<ArgsTable of={Drawer} />

### Menu props
<ArgsTable of={Menu} />