import { beforeEach, describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import FormGrid from '../../src/components/form/FormGrid.vue'
import { formField } from '../fixtures/typed'
import { resetState } from '../helpers'

beforeEach(() => {
  resetState()
})

describe('form grid', () => {
  it('places fields by span: left, right, full by default, auto and row in the next slot', () => {
    const fields = [
      formField('name'),
      formField('code'),
      formField('notes'),
      { ...formField('weight'), span: 'auto' },
      { ...formField('size'), span: 'row' },
      { ...formField('serial'), span: undefined },
      formField('members'),
    ]
    const wrapper = mount(FormGrid, { props: { fields, values: {}, errors: {}, source: null, idPrefix: 'grid' } })
    const classes = (name: string) => wrapper.find(`[data-field="${name}"]`).classes()
    expect(classes('name')).toContain('min-[600px]:col-start-1')
    expect(classes('code')).toContain('min-[600px]:col-start-2')
    expect(classes('notes')).toContain('col-span-full')
    expect(classes('weight')).not.toContain('col-span-full')
    expect(classes('size')).not.toContain('col-span-full')
    expect(classes('serial')).toContain('col-span-full')
    // The relation manager always takes the whole row.
    expect(classes('members')).toContain('col-span-full')
  })

  it('passes values, errors and labels down and emits updates by field name', async () => {
    const wrapper = mount(FormGrid, {
      props: {
        fields: [formField('name'), formField('owner')],
        values: { name: 'Blue', owner: 5 },
        errors: { name: ['Required'] },
        labels: { owner: [{ value: 5, label: 'dana@example.test' }] },
        source: null,
        idPrefix: 'grid',
      },
    })
    const input = wrapper.find('#grid-name')
    expect((input.element as HTMLInputElement).value).toBe('Blue')
    expect(input.attributes('aria-invalid')).toBe('true')
    expect(wrapper.find('#grid-owner').text()).toBe('dana@example.test')
    await input.setValue('Red')
    expect(wrapper.emitted('update')).toEqual([['name', 'Red']])
  })
})