import type { Meta, StoryObj } from '@storybook/vue3'
import { UTag } from '../components'
import { ExtractPropTypes } from 'vue'
import { UTagProps } from '../components/UTag/UTag'

const meta: Meta<typeof UTag> = {
  title: 'Example/Tag',
  component: UTag,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['sm', 'md', 'lg'] },
    count: { control: 'select', options: [null, 1, 2, 3, 4, 5, 6, 7, 8, 9] },
    isChecked: { control: 'select', options: [undefined, true, false] },
    closed: { control: 'boolean', defaultValue: false },
    avatarImagePath: { control: 'text' },
    avatarText: { control: 'text' },
  },
}

export default meta

type Story = StoryObj<typeof UTag>

export const TheBaseTag: Story = {
  render: (args: ExtractPropTypes<UTagProps>) => ({
    components: { UTag },
    setup() {
      return { args }
    },
    template: `<UTag
          v-bind="args" 
          class="mt-10 mb-10 mx-auto" 
          @delete="handleClose" 
          @change="switchCheckbox"
        >
          Label
        </UTag>`,
    methods: {
      handleClose() {
        console.log('handle close')
      },
      switchCheckbox() {
        if (args.isChecked !== undefined) {
          args.isChecked = !args.isChecked
        }
      },
    },
  }),
  args: {
    size: 'sm',
  } as UTagProps,
}

export const AvatarTag: Story = {
  render: (args: ExtractPropTypes<UTagProps>) => ({
    components: { UTag },
    setup() {
      return { args }
    },
    template: `<UTag v-bind="args" class="mt-10 mb-10 mx-auto">Avatar</UTag>`,
  }),
  args: {
    size: 'md',
    count: 3,
  } as UTagProps,
}