import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplAlert from './RplAlert.vue'
import { RplIconNames } from './../icon/constants.ts';
import { reactive, ref } from 'vue'
import { playFunction } from './RplAlert.play.ts'

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


<Meta
  title='Core/Containers/Alert'
  component={RplAlert}
    parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/jtsOPNk1k4cWnumzkZgclD/Ripple-2.0-PoC?node-id=2951%3A189661',
    },
  }}
  argTypes={{
    variant: {
      control: { type: 'select' },
      options: ['information', 'warning', 'error']
    },
    iconName: {
      control: { type: 'select' },
      options: RplIconNames
    },
    linkText: {
      type: 'string'
    },
    linkUrl: {
      type: 'string'
    }
  }}
  args={{
    variant: 'information',
    iconName: 'icon-information-circle-filled',
    message: 'An informative message.',
    linkText: 'Find out more',
    linkUrl: '/'
  }}
/>

# Alert

<ArgsTable of={RplAlert} />

## Variants

<Canvas columns={2}>
  <Story
    name='Information'
    args={{
      variant: 'information',
      message: 'An informative message.',
      iconName: 'icon-information-circle-filled',
      alertId: 'info-1'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Warning'
    args={{
      variant: 'warning',
      message: 'A warning message.',
      iconName: 'icon-fire',
      alertId: 'fire-1'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Danger'
    args={{
      variant: 'error',
      message: 'A critical message.',
      iconName: 'icon-exclamation-circle-filled',
      alertId: 'danger-1'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Stacked

<Canvas>
  <Story
    name='Stacked'
    args={{
      variant: 'error',
      iconName: 'icon-exclamation-circle-filled'
    }}
    parameters={{ actions: { argTypesRegex: '^on.*' } }}
  >
    {(args) => {
      return {
        components: { RplAlert },
        setup() {
          const dismissed = reactive({
            error: false,
            warning: false,
            information: false
          })
          return {
            args,
            dismissed,
            onDismiss: (id) => dismissed[id] = !dismissed[id],
            messages: ['An informative message.', 'A warning message.', 'A critical message.']
          }
        },
        template: `<div style="position: relative;" v-for="(alert, i) in Object.keys(dismissed)">
            <RplAlert v-bind="args"
              :message="messages[i]"
              :key="'alert-' + i"
              :variant="alert"
              :alertId="alert"
              :dismissed="dismissed[alert]"
              @dismiss="onDismiss"
            >
            </RplAlert>
          </div>`
      }
    }}
  </Story>
</Canvas>

## Dismissed

<Canvas columns={2}>
  <Story
    name='Dismissed'
    args={{
      variant: 'error',
      iconName: 'icon-exclamation-circle-filled'
    }}
    play={playFunction}
  >
    {(args) => {
      return {
        components: { RplAlert },
        setup() {
          let dismissed = ref(false)
          return {
            args,
            dismissed,
            onDismiss: (id) => {
              dismissed.value = !dismissed.value
            }
          }
        },
        template: `<div style="position: relative;">
            <RplAlert v-bind="args"
              variant="information"
              alertId="123"
              :dismissed="dismissed"
              @dismiss="onDismiss"
            >
            </RplAlert>
          </div>`
      }
    }}
  </Story>
</Canvas>


## Without CTA

<Canvas>
  <Story
    name='Without CTA'
    args={{
      variant: 'warning',
      message: 'An example of an alert without the CTA.',
      alertId: 'no-cta',
      linkUrl: null
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
