import type { Meta, StoryObj } from '@storybook/vue3'
import { UCheckbox } from '../components'

const meta: Meta<typeof UCheckbox> = {
  title: 'Example/Checkbox',
  component: UCheckbox,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['default', 'radio', 'check', 'toggle'],
    },
    size: { control: 'select', options: ['sm', 'md'] },
    disabled: { control: 'boolean', defaultValue: false },
  },
}

export default meta

export const Toggle: Story = {
  render: (args: any) => ({
    components: { UCheckbox },
    setup() {
      return { args }
    },
    template: '<UCheckbox v-model="args.model" v-bind="args"></UCheckbox>',
    methods: {
      onCheck() {
        args.checked = !args.checked
      },
    },
  }),
  args: {
    size: 'sm',
    variant: 'toggle',
    model: false,
    tabindex: 0,
  },
}

type Story = StoryObj<typeof UCheckbox>

export const Primary: Story = {
  render: (args: any) => ({
    components: { UCheckbox },
    setup() {
      return { args }
    },
    template: '<UCheckbox v-model="args.model" v-bind="args"></UCheckbox>',
    methods: {
      onCheck() {
        args.checked = !args.checked
      },
    },
  }),
  args: {
    size: 'sm',
    variant: 'default',
    model: false,
    tabindex: 0,
  },
}

export const Text: Story = {
  render: (args: any) => ({
    components: { UCheckbox },
    setup() {
      return { args }
    },
    template: '<UCheckbox v-model="args.model" v-bind="args">Text</UCheckbox>',
    methods: {
      onCheck() {
        args.checked = !args.checked
      },
    },
  }),
  args: {
    size: 'sm',
    variant: 'default',
    model: false,
    tabindex: 0,
  },
}