import { Meta, Story, Canvas } from "@storybook/addon-docs";

import * as stories from "./popup-layout.stories";

<Meta of={stories} />

Please note that because these stories use `router-outlet`, there are issues with rendering content
when Light & Dark mode is selected. The stories are best viewed by selecting one color mode.

# Popup Tab Navigation

The popup tab navigation component composes together the popup page and the bottom tab navigation
footer. This component is intended to be used a level _above_ each extension tab's page code.

The navigation footer contains the 4 main page links for the browser extension. It uses the Angular
router to determine which page is currently active, and style the button appropriately. Clicking on
the buttons will navigate to the correct route. The navigation footer has a max-width built in so
that the page looks nice when the extension is popped out.

Long button names will be ellipsed.

Usage example:

```html
<popup-tab-navigation>
  <popup-page></popup-page>
</popup-tab-navigation>
```

# Popup Page

The popup page handles positioning a page's `header` and `footer` elements, and inserting the rest
of the content into the `main` element with scroll. There is also a max-width built in so that the
page looks nice when the extension is popped out.

**Slots**

- `header`
  - Use `popup-header` component.
  - Every page should have a header.
- `footer`
  - Use the `popup-footer` component.
  - Not every page will have a footer.
- default
  - Whatever content you want in `main`.

Basic usage example:

```html
<popup-page>
  <popup-header slot="header"></popup-header>
  <div>This is content</div>
  <popup-footer slot="footer"></popup-footer>
</popup-page>
```

## Popup header

**Args**

- `pageTitle`: required
  - Inserts title as an `h1`.
- `showBackButton`: optional, defaults to `false`
  - Toggles the back button to appear. The back button uses `Location.back()` to navigate back one
    page in history.

**Slots**

- `end`
  - Use to insert one or more interactive elements.
  - The header handles the spacing between elements passed to the `end` slot.

Usage example:

```html
<popup-header pageTitle="Test" showBackButton>
  <ng-container slot="end">
    <button></button>
    <button></button>
  </ng-container>
</popup-header>
```

Common interactive elements to insert into the `end` slot are:

- `app-current-account`: shows current account and switcher
- `app-pop-out`: shows popout button when the extension is not already popped out
- "Add" button: this can be accomplished with the Button component and any custom functionality for
  that particular page

## Popup footer

Popup footer should be used when the page displays action buttons. It functions similarly to the
Dialog footer in that the calling code is responsible for passing in the different buttons that need
to be rendered.

Usage example:

```html
<popup-footer>
  <button bitButton buttonType="primary">Save</button>
  <button bitButton buttonType="secondary">Cancel</button>
</popup-footer>
```

# Page types

There are a few types of pages that are used in the browser extension.

View the story source code to see examples of how to construct these types of pages.

## Extension Tab

Example of wrapping an extension page in the `popup-tab-navigation` component.

<Canvas>
  <Story of={stories.PopupTabNavigation} />
</Canvas>

## Extension Page

Examples of using just the `popup-page` component, without and with a footer.

<Canvas>
  <Story of={stories.PopupPage} />
</Canvas>

<Canvas>
  <Story of={stories.PopupPageWithFooter} />
</Canvas>

## Popped out

When the browser extension is popped out, the "popout" button should not be passed to the header.

<Canvas>
  <Story of={stories.PoppedOut} />
</Canvas>