import {
  Canvas,
  Meta,
  Story
} from '@storybook/addon-docs'
import { within } from '@storybook/testing-library';
import { provide } from 'vue'
import { eventCheck, a11yCheck, a11yStoryCheck } from './../../../stories/interactions.js'
import RplButton from './RplButton.vue';
import {
  RplButtonThemes,
  RplButtonVariants,
  RplButtonIconPositions
} from './constants';
import { RplIconNames } from './../icon/constants.ts';
import { buttonFocusInteraction } from './RplButton.interactions.ts'
const playFunction = async ({ canvasElement }) => {
  const canvas = await within(canvasElement)
  const button = await canvas.getByRole('button')
  a11yCheck(canvasElement)
  eventCheck(button, 'rpl-button/click')
}

export const Template = (args) => ({
  components: { RplButton },
  setup() {
    return { args }
  },
  template: '<RplButton v-bind="args" />'
});

<Meta
  title='Core/Navigation/Button'
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/jtsOPNk1k4cWnumzkZgclD/Ripple-2.0-PoC?node-id=2715%3A180538',
    },
  }}
  component={RplButton}
  argTypes={{
    label: {
      type: 'string'
    },
    variant: {
      control: { type: 'select' },
      options: RplButtonVariants
    },
    theme: {
      control: { type: 'select' },
      options: RplButtonThemes
    },
    iconName: {
      control: { type: 'select' },
      options: [undefined, ...RplIconNames]
    },
    iconPosition: {
      control: { type: 'select' },
      options: RplButtonIconPositions
    },
    busy: {
      type: 'boolean'
    },
    onClick: { action: 'clicked' }
  }}
  args={{
    label: 'Button text',
    busy: false
  }}
/>


## Default

<ArgsTable of={RplButton} />

<Canvas>
  <Story
    name='Default/Filled'
    args={{
      variant: 'filled'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Default/Outlined'
    args={{
      variant: 'outlined'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Default/White'
    args={{
      variant: 'white'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Default/Elevated'
    args={{
      variant: 'elevated',
      iconName: 'icon-arrow-up'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Default/Destructive'
    args={{
      variant: 'destructive',
    }}
  >
    {Template.bind()}
  </Story>
</Canvas>

## Neutral

<Canvas>
  <Story
    name='Neutral/Outlined'
    args={{
      variant: 'outlined',
      theme: 'neutral'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Neutral/White'
    args={{
      variant: 'white',
      theme: 'neutral'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='Neutral/Elevated'
    args={{
      variant: 'elevated',
      theme: 'neutral',
      iconName: 'icon-arrow-up'
    }}
  >
    {Template.bind()}
  </Story>
</Canvas>


### With Icons

<Canvas>
  <Story
    name='With Icons/Filled'
    args={{
      variant: 'filled',
      iconName: 'icon-arrow-right'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='With Icons/Outlined'
    args={{
      variant: 'outlined',
      iconName: 'icon-arrow-up'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='With Icons/left'
    args={{
      variant: 'filled',
      iconPosition: 'left',
      iconName: 'icon-arrow-left'
    }}
  >
    {Template.bind()}
  </Story>
  <Story
    name='With Icons/right'
    args={{
      variant: 'filled',
      iconPosition: 'right',
      iconName: 'icon-arrow-right'
    }}
  >
    {Template.bind()}
  </Story>
</Canvas>

## Event bus

Test for emitting events on click

<Canvas>
  <Story
    name='Eventbus'
    args={{
      variant: 'filled',
      iconName: 'icon-pin'
    }}
    play={playFunction}
  >
    {Template.bind()}
  </Story>
</Canvas>

## Focus state

<Canvas>
  <Story
    name='Focus state'
    play={buttonFocusInteraction}
    args={{
      variant: 'filled',
      label: 'Focused',
      iconName: 'icon-exclamation-circle-filled'
    }}
  >
    {Template.bind()}
  </Story>
</Canvas>


## Busy state

<Canvas>
  <Story
    name='Busy state'
    args={{
      variant: 'filled',
      label: 'Button text',
      iconName: 'icon-exclamation-circle-filled',
      busy: true
    }}
  >
    {Template.bind()}
  </Story>
</Canvas>
