import type { Meta, StoryObj } from '@storybook/vue3-vite'
import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
import { argTypes, defaultArgs } from './Combobox.settings'
import { Default } from './Combobox.stories'

const meta: Meta<typeof VvCombobox> = {
    title: 'Components/Combobox/Options',
    // @ts-expect-error missing generic components support
    component: VvCombobox,
    args: defaultArgs,
    argTypes,
}

export default meta

type Story = StoryObj<typeof VvCombobox>

export const ArrayOfObjects: Story = {
    ...Default,
    args: {
        ...Default.args,
        options: [
            { value: 'first', label: 'First' },
            { value: 'second', label: 'Second' },
            { value: 'third', label: 'Third' },
        ],
    },
}

export const OptionLabelKey: Story = {
    ...Default,
    args: {
        ...Default.args,
        labelKey: 'name',
        options: [
            { value: 'first', name: 'First' },
            { value: 'second', name: 'Second' },

            { value: 'third', name: 'Third' },
        ],
    },
}

export const OptionValueKey: Story = {
    ...Default,
    args: {
        ...Default.args,
        valueKey: 'id',
        options: [
            { id: 'first', label: 'First' },
            { id: 'second', label: 'Second' },
            { id: 'third', label: 'Third' },
        ],
    },
}

export const GroupedOptions: Story = {
    ...Default,
    args: {
        ...Default.args,
        options: [
            {
                label: 'Group 1',
                options: [
                    { value: 'first', label: 'First' },
                    { value: 'second', label: 'Second' },
                ],
            },
            {
                label: 'Group 2',
                options: [
                    { value: 'third', label: 'Third' },

                    { value: 'fourth', label: 'Fourth' },
                ],
            },
        ],
    },
}

export const DotPathOptions: Story = {
    ...Default,
    args: {
        ...Default.args,
        valueKey: 'value.id',
        labelKey: 'label.en',
        options: [
            { value: { id: 'first' }, label: { it: 'Primo', en: 'First' } },
            {
                value: { id: 'second' },
                label: { it: 'Secondo', en: 'Second' },
            },
            { value: { id: 'third' }, label: { it: 'Terzo', en: 'Third' } },
            { value: { id: 'fourth' }, label: { it: 'Quarto', en: 'Fourth' } },
        ],
    },
}

export const ObjectValue: Story = {
    ...Default,
    args: {
        ...Default.args,
        multiple: true,
        labelKey: 'name',
        valueKey: '',
        options: [
            { name: 'John Doe', email: 'john.doe@test.com' },
            { name: 'Jane Doe', email: 'jane.doe@test.com' },
        ],
    },
}