// 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 Modal from '.'

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

const methods = {
  onClose: action('close'),
}

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

export const normal = () => ({
  components: {
    Modal,
  },
  props: {
    open: {
      default: boolean('open', true),
    },
    size: {
      default: radios('size', sizeOptions, ''),
    },
    closeBtn: {
      default: boolean('closeBtn', false),
    },
    text: {
      default: text('slot', 'Modal content'),
    },
  },
  data() {
    return {
      value: false,
    }
  },
  template: `
    <Modal
      :open="open"
      :size="size"
      :closeBtn="closeBtn"
      @modalclose="onClose"
    >
      {{text}}
    </Modal>
  `,
  methods,
})
