import { Canvas, Meta, Story } from '@storybook/addon-docs';
import { sbCompPrefix } from '../../global/storybook-utils';
import { action } from '@storybook/addon-actions';
import CvHeader from './CvHeader.vue';
import CvSkipToContent from './CvSkipToContent.vue';
import CvHeaderName from './CvHeaderName.vue';
import CvHeaderNav from './CvHeaderNav.vue';
import CvHeaderMenuItem from './CvHeaderMenuItem.vue';
import CvHeaderMenuButton from './CvHeaderMenuButton.vue';
import CvHeaderMenu from './CvHeaderMenu.vue';
import CvHeaderGlobalAction from './CvHeaderGlobalAction.vue';
import CvHeaderPanel from './CvHeaderPanel.vue';
import CvSwitcher from './CvSwitcher.vue';
import CvSwitcherItem from './CvSwitcherItem.vue';
import CvSwitcherItemLink from './CvSwitcherItemLink.vue';
import CvSideNav from './CvSideNav.vue';
import CvSideNavItems from './CvSideNavItems.vue';
import CvSideNavLink from './CvSideNavLink.vue';
import CvSideNavMenu from './CvSideNavMenu.vue';
import CvSideNavMenuDivider from './CvSideNavMenuDivider.vue';
import CvSideNavMenuItem from './CvSideNavMenuItem.vue';
import CvContent from './CvContent.vue';
import {
  Notification20,
  UserAvatar20,
  Login20,
  Switcher20,
  Home16,
  ChatBot16,
  ConnectionTwoWay16,
  MachineLearningModel16,
} from '@carbon/icons-vue';
import { ref } from 'vue';
const loggedIn = ref(false);

<Meta title={`${sbCompPrefix}/ui-select/CvHeader`} component={CvHeader} />

export const Template = args => ({
  // Components used in your story `template` are defined in the `components` object
  components: {
    CvHeader,
    CvSkipToContent,
    CvHeaderName,
    CvHeaderNav,
    CvHeaderMenuItem,
    CvHeaderMenuButton,
    CvHeaderMenu,
    CvHeaderGlobalAction,
    CvHeaderPanel,
    CvSwitcher,
    CvSwitcherItem,
    CvSwitcherItemLink,
    CvSideNav,
    CvSideNavItems,
    CvSideNavLink,
    CvSideNavMenu,
    CvSideNavMenuDivider,
    CvSideNavMenuItem,
    CvContent,
    Notification20,
    UserAvatar20,
    Login20,
    Switcher20,
    Home16,
    ChatBot16,
    ConnectionTwoWay16,
    MachineLearningModel16,
  },
  // The story's `args` need to be mapped into the template through the `setup()` method
  setup() {
    return {
      ...args,
      actionNotifications: () => {},
      actionUserAvatar: () => {
        loggedIn.value = !loggedIn.value;
      },
      actionAppSwitcher: () => {},
      onPanelResize: action('panel-resize'),
      loggedIn,
    };
  },
  // And then the `args` are bound to your component with `v-bind="args"`
  template: args.template,
});
const defaultTemplate = `
<cv-header aria-label="Carbon header">
  <cv-skip-to-content href="#main-content">
    Skip to content
  </cv-skip-to-content>
  <cv-header-name href="javascript:void(0)" prefix="IBM">
    [Platform]
  </cv-header-name>
  <cv-header-nav aria-label="Carbon nav">
    <cv-header-menu-item href="javascript:void(0)">Link 1</cv-header-menu-item>
    <cv-header-menu-item href="javascript:void(0)">Link 2</cv-header-menu-item>
    <cv-header-menu aria-label="Link 3" title="Link 3">
      <cv-header-menu-item href="javascript:void(0)">Submenu Link 1</cv-header-menu-item>
      <cv-header-menu-item href="javascript:void(0)">Submenu Link 2</cv-header-menu-item>
      <cv-header-menu-item href="javascript:void(0)">Submenu Link 3</cv-header-menu-item>
    </cv-header-menu>
  </cv-header-nav>
  <template v-slot:header-global>
    <cv-header-global-action
      aria-label="Notifications"
      aria-controls="notifications-panel"
      @click="actionNotifications"
      label="Notifications"
      tipPosition="bottom"
      tipAlignment="start"
      >
      <notification20/>
    </cv-header-global-action>
    <cv-header-global-action
      aria-label="User avatar"
      @click="actionUserAvatar"
      aria-controls="user-panel"
      label="Log in"
      tipPosition="bottom"
      tipAlignment="center"
      >
      <user-avatar20 v-if="loggedIn"/>
      <login20 v-else />
    </cv-header-global-action>
    <cv-header-global-action
      aria-label="App switcher"
      aria-controls="switcher-panel"
      @click="actionAppSwitcher"
      label="App switcher"
      tipPosition="bottom"
      tipAlignment="end"
      >
      <switcher20 />
    </cv-header-global-action>
  </template>
  <template v-slot:right-panels>
    <cv-header-panel  id="user-panel" @panel-resize="onPanelResize">
      An empty user panel
    </cv-header-panel>
    <cv-header-panel  id="notifications-panel" @panel-resize="onPanelResize">
      An empty panel
    </cv-header-panel>
    <cv-header-panel id="switcher-panel" @panel-resize="onPanelResize">
      <cv-switcher>
        <cv-switcher-item>
          <cv-switcher-item-link href="javascript:void(0)" selected>Selected app</cv-switcher-item-link>
        </cv-switcher-item>
        <cv-switcher-item>
          <cv-switcher-item-link href="javascript:void(0)">Other app</cv-switcher-item-link>
        </cv-switcher-item>
        <cv-switcher-item>
          <cv-switcher-item-link href="javascript:void(0)">Yet another app</cv-switcher-item-link>
        </cv-switcher-item>
      </cv-switcher>
    </cv-header-panel>
  </template>
</cv-header>
<cv-content>
  <h1>Main Content</h1>
  <p>This is the main content area that the skip link targets.</p>
</cv-content>
`;
const railTemplate = `
<cv-header aria-label="Carbon header">
  <cv-header-menu-button aria-label="Header menu" aria-controls="side-nav" :active="expandedSideNav"/>
  <cv-skip-to-content href="#main-content">Skip to content</cv-skip-to-content>
  <cv-header-name href="javascript:void(0)" prefix="IBM">[Platform]</cv-header-name>
  <template v-slot:left-panels>
    <cv-side-nav id="side-nav" @panel-resize="onPanelResize" :rail="true" :fixed="useFixed" :expanded="expandedSideNav">
      <cv-side-nav-items>
        <cv-side-nav-menu title="Home">
          <template v-slot:nav-icon><home16 /></template>
          <cv-side-nav-menu-item href="javascript:void(0)" active>Lawn care</cv-side-nav-menu-item>
          <cv-side-nav-menu-item href="javascript:void(0)">Plumbing</cv-side-nav-menu-item>
          <cv-side-nav-menu-item href="javascript:void(0)">Heating & Air</cv-side-nav-menu-item>
        </cv-side-nav-menu>
        <cv-side-nav-menu title="Chat ">
          <template v-slot:nav-icon><chat-bot16 /></template>
          <cv-side-nav-menu-item href="javascript:void(0)">Bender</cv-side-nav-menu-item>
          <cv-side-nav-menu-item href="javascript:void(0)" aria-current="page">Sonny</cv-side-nav-menu-item>
          <cv-side-nav-menu-item href="javascript:void(0)">Rosie</cv-side-nav-menu-item>
        </cv-side-nav-menu>
        <cv-side-nav-menu-divider/>
        <cv-side-nav-link href="javascript:void(0)">
          <template v-slot:nav-icon><connection-two-way16 /></template>
          Connection
        </cv-side-nav-link>
        <cv-side-nav-link href="javascript:void(0)">
          <template v-slot:nav-icon><machine-learning-model16 /></template>
          Machine Learning
        </cv-side-nav-link>
      </cv-side-nav-items>
    </cv-side-nav>
  </template>
</cv-header>
<cv-content>
  <h1>Main Content</h1>
  <p>This is the main content area that the skip link targets.</p>
</cv-content>
`;
const fixedSideNavTemplate = `
<cv-header aria-label="Carbon header">
  <cv-skip-to-content href="#main-content">
    Skip to content
  </cv-skip-to-content>
  <cv-header-name href="javascript:void(0)" prefix="IBM">
    [Platform]
  </cv-header-name>
</cv-header>
<cv-side-nav id="side-nav" @panel-resize="onPanelResize" :rail="false" :fixed="true" :expanded="true">
  <cv-side-nav-items>
    <cv-side-nav-menu title="Home">
      <template v-slot:nav-icon><home16 /></template>
      <cv-side-nav-menu-item href="javascript:void(0)" active>Lawn care</cv-side-nav-menu-item>
      <cv-side-nav-menu-item href="javascript:void(0)">Plumbing</cv-side-nav-menu-item>
      <cv-side-nav-menu-item href="javascript:void(0)">Heating & Air</cv-side-nav-menu-item>
    </cv-side-nav-menu>
    <cv-side-nav-menu title="Chat ">
      <template v-slot:nav-icon><chat-bot16 /></template>
      <cv-side-nav-menu-item href="javascript:void(0)">Bender</cv-side-nav-menu-item>
      <cv-side-nav-menu-item href="javascript:void(0)" aria-current="page">Sonny</cv-side-nav-menu-item>
      <cv-side-nav-menu-item href="javascript:void(0)">Rosie</cv-side-nav-menu-item>
    </cv-side-nav-menu>
    <cv-side-nav-menu-divider/>
    <cv-side-nav-link href="javascript:void(0)">
      <template v-slot:nav-icon><connection-two-way16 /></template>
      Connection
    </cv-side-nav-link>
    <cv-side-nav-link href="javascript:void(0)">
      <template v-slot:nav-icon><machine-learning-model16 /></template>
      Machine Learning
    </cv-side-nav-link>
  </cv-side-nav-items>
</cv-side-nav>
<cv-content>
  <h1>Main Content</h1>
  <p>This is the main content area that the skip link targets.</p>
</cv-content>
`;

# UI Shell components

Set of components for managing navigation and header bars.

## CvHeader

Slots:

- default - buttons links etc
- header-global - Global button content
- left-panels - Content panel on the left - side nav
- right-panels - Right panel content - users, languages, notifications, switcher, etc

## CvHeaderGlobalAction

Properties:

- active - `Boolean` - Specify whether the menu button is "active".
- ariaControls - `String` Specify the id of a panel that this button controls
- label - `String` - button label
- tipPosition - `String` - `top`, `left`, `bottom`, `right`. Default: `bottom`
- tipAlignment - `String` - `start`, `center`, `end`. Default `center`

Slots:

- icon - Icon for the action

## CvHeaderMenu

Properties:

- title - `String` - Provide a label for the link text
- hoverToggle - `Boolean` - activate the menu on hover. Default `true`

Slots:

- default - menu content

## CvHeaderMenuButton

Properties:

- active - `Boolean` - Specify whether the menu button is "active".
- ariaControls - **required** `String` Specify the id of a panel that this button controls

## CvHeaderMenuItem

Properties:

- disabled - `Boolean` link is disabled
- to - link router path
- href - `String` destination. If `to` is specified this value is ignored
- active - `Boolean` - Specify whether the menu button is "active".
- ariaCurrent - `String` - `aria-current` for this button
- role - `String` - role value for the main component. Default `undefned`

Slots:

- default - menu content

## CvHeaderName

Properties:

- prefix - `String` - Optionally specify a prefix to your header name. Useful for companies, for example: IBM [Product Name] versus solely [Product Name]
- disabled - `Boolean` link is disabled
- to - link router path
- href - `String` destination. If `to` is specified this value is ignored

Slots:

- default - header content

## CvHeaderNav

Properties:

- ariaLabelledBy - `String` `aria-labelledby` value

Slots:

- default - nav content

## CvHeaderPanel

Properties:

- **Migration Note** - The `v-model` has changed in Vue 3. To control expanded as a `v-model` specify `v-model:expanded`
- expanded - `Boolean` - Specify whether the panel is expanded
- id - `String` - **required** this id must match the `ariaControls` value of the button that controls this panel

Slots:

- default - panel content

## CvSideNav

Properties:

- **Migration Note** - The `v-model` has changed in Vue 3. To control expanded as a `v-model` specify `v-model:expanded`
- expanded - `Boolean` - Specify whether the panel is expanded
- id - `String` - **required** this id must match the `ariaControls` value of the button that controls this side nav
- fixed - `Boolean` - Specify if side nav is standalone. Default: `false`
- rail - `Boolean` - Optional prop to display the side nav as a rail
- assistiveToggleText - `String` - Assistive text for a non-rail, non-fixed, non-header controlled side nav

Slots:

- default - nav content

## CvSideNavIcon

Properties:

- small - `Boolean` - Use a smaller icon

Slots:

- default - icon

## CvSideNavLink

Properties:

- active - `Boolean` - Specify whether the menu button is "active".
- icon - icon object to display with the link
- disabled - `Boolean` link is disabled
- to - link router path
- href - `String` destination. If `to` is specified this value is ignored

Slots:

- default - nav content

## CvSideNavMenu

Properties:

- active - `Boolean` - Specify whether the menu is "active".
- title - `String` - Provide a label for the link text
- expanded - `Boolean` - Specify whether the menu is expanded

Slots:

- default - menu content
- nav-icon - icon

## CvSideNavMenuDivider

Draw a divider line. No props or slots.

## CvSideNavMenuItem

Properties:

- active - `Boolean` - Specify whether the menu is "active".
- disabled - `Boolean` link is disabled
- to - Vue router path
- href - `String` destination. If `to` is specified this value is ignored

Slots:

- default - menu content

## CvSkipToContent

Properties:

- disabled - `Boolean` link is disabled
- to - Vue router path
- href - `String` destination. If `to` is specified this value is ignored

Slots:

- default - default "Skip to main content"

## CvSwitcher

Slots:

- default - include switcher content

## CvSwitcherItem

Slots:

- default - include switcher item content

## CvSwitcherItemLink

Properties:

- disabled - `Boolean` link is disabled
- to - Vue router path
- href - `String` destination. If `to` is specified this value is ignored
- selected - `Boolean` is this item selected

Slots:

- default - item content

<Canvas>
  <Story
    name="Default"
    parameters={{
      controls: {
        exclude: [
          'template',
          'default',
          'header-global',
          'left-panels',
          'right-panels',
        ],
      },
      docs: { source: { code: defaultTemplate.replace('v-bind="args"', '') } },
    }}
    args={{
      template: defaultTemplate,
    }}
    argTypes={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# CvHeader with side rail

Migration notes:

- The `panel-resize` event is emitted anytime the rail is expanded or collapsed including for hover events. In the Vue 2
  version this event was only emitted when the "hamburger" menu button was clicked.

<Canvas>
  <Story
    name="Side rail"
    parameters={{
      controls: {
        exclude: [
          'template',
          'default',
          'header-global',
          'left-panels',
          'right-panels',
        ],
      },
      docs: { source: { code: railTemplate.replace('v-bind="args"', '') } },
    }}
    args={{
      template: railTemplate,
      useFixed: false,
      expandedSideNav: false,
    }}
    argTypes={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# CvHeader with fixed side nav

<Canvas>
  <Story
    name="Fixed side nav"
    parameters={{
      controls: {
        exclude: [
          'template',
          'default',
          'header-global',
          'left-panels',
          'right-panels',
        ],
      },
      docs: {
        source: { code: fixedSideNavTemplate.replace('v-bind="args"', '') },
      },
    }}
    args={{
      template: fixedSideNavTemplate,
    }}
    argTypes={{}}
  >
    {Template.bind({})}
  </Story>
</Canvas>