import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect, userEvent, fn, within } from 'storybook/test'

import { OptionsCombobox, type Option } from './options-combobox'

const options: Option[] = [
  { id: 't1', labels: [{ lang: 'en', label: 'Wood' }] },
  { id: 't2', labels: [{ lang: 'en', label: 'Bronze' }] },
]

const meta = {
  component: OptionsCombobox,
  tags: ['ai-generated'],
  args: { id: 'material', value: '', onChange: fn(), options, lang: 'en', placeholder: 'Select…' },
} satisfies Meta<typeof OptionsCombobox>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  play: async ({ canvas }) => {
    await expect(canvas.getByPlaceholderText('Select…')).toBeVisible()
  },
}

export const Selected: Story = {
  args: { value: 't1' },
}

export const FiltersOnType: Story = {
  play: async ({ canvas, args }) => {
    const input = canvas.getByPlaceholderText('Select…')
    await userEvent.click(input)
    await userEvent.type(input, 'bro')
    const body = within(document.body)
    await userEvent.click(await body.findByText('Bronze'))
    await expect(args.onChange).toHaveBeenCalledWith('t2')
  },
}
