import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import BaseInput from '../../components/BaseInput.vue'
import BaseSelect from '../../components/BaseSelect.vue'
import FormField from '../../components/FormField.vue'
import ProtocolStepParameterField from '../../components/ProtocolStepParameterField.vue'
import type { ParameterDefinition } from '../../composables/useProtocolTemplates'

const temperature: ParameterDefinition = {
  key: 'temperature',
  label: 'Temperature',
  type: 'temperature',
  unit: '°C',
}

const buffer: ParameterDefinition = {
  key: 'buffer',
  label: 'Buffer',
  type: 'select',
  options: [{ value: 'PBS', label: 'PBS' }],
}

describe('ProtocolStepParameterField', () => {
  it.each([
    [temperature, 'input'],
    [buffer, 'select'],
  ])('should link the $label label to its control', (parameter, tag) => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter } })

    expect(wrapper.get(`[id="${wrapper.get('label').attributes('for')}"]`).element.tagName.toLowerCase()).toBe(tag)
  })

  it('should emit numeric parameter changes as numbers', async () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })

    await wrapper.get('input').setValue('25')

    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([25])
  })

  it('should show the unit in the BaseInput suffix segment (6c)', () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })

    expect(wrapper.get('.mint-input-group__suffix').text()).toBe('°C')
  })

  it('should render text parameters with BaseInput (6c)', () => {
    const parameter: ParameterDefinition = { key: 'note', label: 'Note', type: 'text' }
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter } })

    expect(wrapper.findComponent(BaseInput).exists()).toBe(true)
  })

  it('should render select parameters with BaseSelect (6c)', () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer } })

    expect(wrapper.findComponent(BaseSelect).exists()).toBe(true)
  })

  it('should mark the BaseSelect as errored when the parameter has an error (6c)', () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, error: 'Buffer is required' } })

    expect(wrapper.findComponent(BaseSelect).props('error')).toBe(true)
  })

  it('should show the validation error through FormField (6c)', () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, error: 'Buffer is required' } })

    expect(wrapper.findComponent(FormField).props('error')).toBe('Buffer is required')
  })

  it('should lay the field out as a FormField row (6c)', () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature } })

    expect(wrapper.findComponent(FormField).props('layout')).toBe('row')
  })

  it('should size a numeric parameter to the 32px control height', () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: temperature, modelValue: 37 } })

    expect(wrapper.findComponent(BaseInput).props('size')).toBe('sm')
  })

  it('should size a select parameter to the 32px control height', () => {
    const wrapper = mount(ProtocolStepParameterField, { props: { parameter: buffer, modelValue: 'PBS' } })

    expect(wrapper.findComponent(BaseSelect).props('size')).toBe('sm')
  })
})