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

import ContainerLayout from '@/layouts/ContainerLayout.vue'
import LinearLayout from '@/layouts/LinearLayout.vue'

import StackLayout from '@/layouts/StackLayout.vue'
import BaseButton from '@/elements/button/BaseButton.vue'
import BaseHeading from '@/elements/content/BaseHeading.vue'
import BaseIcon from '@/elements/icon/BaseIcon.vue'

<Meta title="Extra: Patterns|Navbar" />

# Action Navbar

The `ActionNavbar` component sits at the top of the page and it is composed of two levels:

1. the first level contains the title of the view, an action to navigate backword and a primary action
2. the second level contains secondary actions that can be performed on the whole elements of the view

Each view has only one primary action.

<Preview>
  <Story name="Action Navbar">
    {{
        components: { StackLayout, BaseButton, BaseHeading, BaseIcon, ContainerLayout, LinearLayout },
        template: 
          `<container-layout hspace="small" style="border: 1px dashed black;">
            <linear-layout orientation="vertical" lwidth="match-parent">
              <linear-layout gravity="repulsive" lwidth="match-parent">
                <linear-layout>
                  <base-button type="invisible">
                    <base-icon value="arrow-left" />
                  </base-button>
                  <base-heading>Title</base-heading>
                </linear-layout>
                <base-button type="primary">Primary action</base-button>
              </linear-layout>
              <linear-layout lwidth="match-parent">
                <base-button>Action</base-button>
                <base-button>Action</base-button>
              </linear-layout>
            </linear-layout>
          </container-layout>`,
    }}
  </Story>
</Preview>

## Action Navbar with Selection

When items of a view are selected, there could be actions users can perform only on them. These actions are visible only when items are selected and they are positioned in the secon level of the `ActionNavbar`, on the right.
The first action is always the deselect one.

<Preview>
  <Story name="Action Navbar with Selection">
    {{
        components: { StackLayout, BaseButton, BaseHeading, BaseIcon, ContainerLayout, LinearLayout },
        template: 
          `<container-layout style="border: 1px dashed black;">
            <linear-layout orientation="vertical" lwidth="match-parent">
              <linear-layout gravity="repulsive" lwidth="match-parent">
                <linear-layout>
                  <base-button type="invisible">
                    <base-icon value="arrow-left" />
                  </base-button>
                  <base-heading>Title</base-heading>
                </linear-layout>
                <base-button type="primary">Primary action</base-button>
              </linear-layout>
              <linear-layout gravity="repulsive" lwidth="match-parent">
                <linear-layout>
                  <base-button>Action</base-button>
                  <base-button>Action</base-button>
                </linear-layout>
                <linear-layout>
                  <base-button type="link">deselect all (10)</base-button>
                  <base-button>Action on selection</base-button>
                </linear-layout>
              </linear-layout>
            </linear-layout>
          </container-layout>`
    }}
  </Story>
</Preview>