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

import { TermRow } from './term-row'

const meta = {
  component: TermRow,
  tags: ['ai-generated'],
  args: {
    vocabularyId: 'v1',
    lang: 'en',
    term: { id: 't1', external_uri: null, labels: [{ lang: 'en', label: 'Wood' }] },
  },
} satisfies Meta<typeof TermRow>

export default meta
type Story = StoryObj<typeof meta>

export const Display: Story = {
  play: async ({ canvas }) => {
    await expect(canvas.getByText('Wood')).toBeVisible()
  },
}

export const TogglesEdit: Story = {
  play: async ({ canvas }) => {
    await userEvent.click(canvas.getByRole('button', { name: 'Edit' }))
    await expect(canvas.getByRole('button', { name: 'Save' })).toBeVisible()
  },
}

export const CancelsEdit: Story = {
  play: async ({ canvas }) => {
    await userEvent.click(canvas.getByRole('button', { name: 'Edit' }))
    await userEvent.click(canvas.getByRole('button', { name: 'Cancel' }))
    await expect(canvas.getByText('Wood')).toBeVisible()
  },
}