import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplFormDate from './RplFormDate.vue'

export const SingleTemplate = (args) => ({
  components: { RplFormDate },
  setup() {
    return { args }
  },
  data: () => ({ currentValue: null }),
  methods: {
    onChange: function(val) {
      this.currentValue = val
    }
  },
  template: `
    <RplFormDate v-bind="args" :value="currentValue" @onChange="onChange" />
    <p :style="{marginTop: '60px'}" class="rpl-type-p"><strong>Output value (not part of component): "{{currentValue}}"</strong></p>
  `
})

<Meta title='Forms/Date input' component={RplFormDate} args={{
  id: 'dropdown-default',
}} />

# Forms

<ArgsTable of={RplFormDate} />

<Canvas>
  <Story
    name='Default'
    args={{
      id: 'date-default',
      variant: 'default',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Reverse'
    parameters={{
      background: 'gray'
    }}
    args={{
      id: 'date-reverse',
      variant: 'reverse'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Inactive'
    args={{
      id: 'date-inactive',
      variant: 'default',
      disabled: true
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Invalid'
    args={{
      id: 'date-invalid',
      variant: 'default',
      invalid: true
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='Custom date format'
    args={{
      id: 'date-format',
      variant: 'default',
      dateFormat: 'dd/MM/yyyy'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
