// 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,
} from '@storybook/addon-knobs'

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

import Checkbox from '.'

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

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

export const normal = () => ({
  components: {
    Checkbox,
  },
  props: {
    name: {
      default: text('name'),
    },
    disabled: {
      default: boolean('disabled', false),
    },
    text: {
      default: text('slot', 'Label'),
    },
  },
  data() {
    return {
      value: false,
    }
  },
  template: `
    <Checkbox
      :name="name"
      :value="true"
      :disabled="disabled"
      v-model="value"
      @input="onInput"
      @click="onClick"
    >
      {{text}}
    </Checkbox>
  `,
  methods,
})
