import type { Meta, StoryObj } from '@storybook/vue3-vite'
import VvButton from '@/components/VvButton/VvButton.vue'
import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
import { argTypes, defaultArgs } from './ButtonGroup.settings'
import { defaultTest } from './ButtonGroup.test'

const meta: Meta<typeof VvButtonGroup> = {
    title: 'Components/ButtonGroup',
    component: VvButtonGroup,
    args: defaultArgs,
    argTypes,
    tags: ['autodocs'],
}

export default meta

type Story = StoryObj<typeof VvButtonGroup>

export const Default: Story = {
    args: {
        ...defaultArgs,
    },
    render: args => ({
        components: { VvButton, VvButtonGroup },
        setup() {
            return { args }
        },
        data: () => ({ value: undefined }),
        template: /* html */ `
			<vv-button-group v-bind="args" v-model="value" data-testId="button-group">
				<vv-button name="1a" data-testId="first-button">Button 1</vv-button>
				<vv-button name="2b">Button 2</vv-button>
				<vv-button name="3c">Button 3</vv-button>
			</vv-button-group>
			<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
		`,
    }),
    play: defaultTest,
}