import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import ConcentrationInput from '../../components/ConcentrationInput.vue'
import UnitInput from '../../components/UnitInput.vue'

describe('ConcentrationInput', () => {
  it('delegates value and unit selection to UnitInput', async () => {
    const wrapper = mount(ConcentrationInput, {
      props: {
        modelValue: { value: 5, unit: 'µM' },
        allowedUnits: ['nM', 'µM'],
        min: 0,
        max: 10,
        size: 'sm',
      },
    })

    const unitInput = wrapper.findComponent(UnitInput)
    expect(unitInput.exists()).toBe(true)
    expect(unitInput.props('modelValue')).toBe(5)
    expect(unitInput.props('unit')).toBe('µM')
    expect(unitInput.props('units')).toEqual([
      { value: 'nM', label: 'nM', group: undefined, factor: 1e-9 },
      { value: 'µM', label: 'µM', group: undefined, factor: 1e-6 },
    ])

    await unitInput.vm.$emit('update:modelValue', 8)
    await unitInput.vm.$emit('update:unit', 'nM')

    expect(wrapper.emitted('update:modelValue')).toEqual([
      [{ value: 8, unit: 'µM' }],
      [{ value: 5, unit: 'nM' }],
    ])
  })

  it('keeps concentration-specific conversion hints', () => {
    const wrapper = mount(ConcentrationInput, {
      props: {
        modelValue: { value: 1000, unit: 'nM' },
      },
    })

    expect(wrapper.text()).toContain('1 µM')
  })

  it('should render the approximation sign as text when a hint is shown', () => {
    const wrapper = mount(ConcentrationInput, { props: { modelValue: { value: 1000, unit: 'nM' } } })
    expect(wrapper.find('.mint-unit-input__hint').text()).toBe('≈ 1 µM')
  })

  it('should show the nearest-unit hint when the value is 250 µM', () => {
    const wrapper = mount(ConcentrationInput, { props: { modelValue: { value: 250, unit: 'µM' } } })
    expect(wrapper.find('.mint-unit-input__hint').text()).toBe('≈ 0.25 mM')
  })

  it('should hide the hint when showConversion is false', () => {
    const wrapper = mount(ConcentrationInput, { props: { modelValue: { value: 250, unit: 'µM' }, showConversion: false } })
    expect(wrapper.find('.mint-unit-input__hint').exists()).toBe(false)
  })
})