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

import { FieldForm } from './field-form'

const meta = {
  component: FieldForm,
  tags: ['ai-generated'],
} satisfies Meta<typeof FieldForm>

export default meta
type Story = StoryObj<typeof meta>

export const Create: Story = {
  args: { editing: null, onDone: fn() },
  play: async ({ canvas }) => {
    await expect(canvas.getByLabelText('Key')).toBeEnabled()
  },
}

export const Edit: Story = {
  args: {
    editing: {
      key: 'material',
      data_type: 'text',
      vocabulary_id: null,
      authority_kind: null,
      required: true,
      group: 'Identification',
      labels: [{ lang: 'en', label: 'Material' }],
    },
    onDone: fn(),
  },
  play: async ({ canvas }) => {
    await expect(canvas.getByLabelText('Key')).toBeDisabled()
    await expect(canvas.getByRole('button', { name: 'Save' })).toBeVisible()
  },
}
