// eslint-disable-next-line import/no-extraneous-dependencies
import { action } from '@storybook/addon-actions'
// eslint-disable-next-line import/no-extraneous-dependencies
import {
  withKnobs,
  text,
  boolean,
  radios,
} from '@storybook/addon-knobs'

import withTheme from '../../../storybookUtils/decorators/withTheme'
import getRadioOptions from '../../../storybookUtils/getRadioOptions'

import Button from '.'

const sizeOptions = getRadioOptions([
  '',
  'xs',
  'sm',
  'md',
  'lg',
])

const typeOptions = getRadioOptions([
  'button',
  'submit',
  'reset',
])

const methods = {
  onClick: action('click'),
  onAction: action('action'),
}

export default {
  title: 'Button',
  decorators: [
    withKnobs,
    withTheme,
  ],
}

export const normal = () => ({
  components: {
    Button,
  },
  props: {
    lg: {
      default: boolean('lg', false),
    },
    sm: {
      default: boolean('sm', false),
    },
    size: {
      default: radios('size', sizeOptions, ''),
    },
    primary: {
      default: boolean('primary', true),
    },
    secondary: {
      default: boolean('secondary', false),
    },
    outlinePrimary: {
      default: boolean('outlinePrimary', false),
    },
    outlineSecondary: {
      default: boolean('outlineSecondary', false),
    },
    type: {
      default: radios('type', typeOptions, ''),
    },
    async: {
      default: boolean('async', false),
    },
    disabled: {
      default: boolean('disabled', false),
    },
    text: {
      default: text('slot', 'Click me'),
    },
  },
  data() {
    return {
      value: false,
    }
  },
  template: `
    <Button
      :lg="lg"
      :sm="sm"
      :size="size"
      :primary="primary"
      :secondary="secondary"
      :outlinePrimary="outlinePrimary"
      :outlineSecondary="outlineSecondary"
      :type="type"
      :disabled="disabled"
      :action="onAction"
      @click="onClick"
    >
      {{text}}
    </Button>
  `,
  methods,
})
