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

function mountFormula(props: Record<string, unknown> = {}) {
  return mount(FormulaInput, { props: { modelValue: 'C6H12O6', ...props } })
}

describe('FormulaInput inline rendering (4b)', () => {
  it('should render the formula inside the field when blurred', () => {
    const wrapper = mountFormula()
    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(true)
  })

  it('should render counts as subscripts when blurred', () => {
    const wrapper = mountFormula()
    expect(wrapper.findAll('.mint-formula-input__sub').map(n => n.text())).toEqual(['6', '12', '6'])
  })

  it('should show the raw text instead of the rendering when focused', async () => {
    const wrapper = mountFormula()
    await wrapper.find('input').trigger('focus')
    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(false)
  })

  it('should render the formula again when blurred after focus', async () => {
    const wrapper = mountFormula()
    await wrapper.find('input').trigger('focus')
    await wrapper.find('input').trigger('blur')
    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(true)
  })

  it('should not render the formula when showPreview is false', () => {
    const wrapper = mountFormula({ showPreview: false })
    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(false)
  })

  it('should render the hydrate coefficient full size when blurred', () => {
    const wrapper = mountFormula({ modelValue: 'CuSO4·5H2O' })
    expect(wrapper.findAll('.mint-formula-input__sub').map(n => n.text())).toEqual(['4', '2'])
  })
})

describe('FormulaInput molecular weight segment (4b)', () => {
  it('should show MW, the value and g/mol as text when the formula is valid', () => {
    const wrapper = mountFormula()
    expect(wrapper.find('.mint-formula-input__mw').text()).toBe('MW 180.16 g/mol')
  })

  it('should show a dash for the value when the field is empty', () => {
    const wrapper = mountFormula({ modelValue: '' })
    expect(wrapper.find('.mint-formula-input__mw-value').text()).toBe('—')
  })

  it('should hide the segment when showMW is false', () => {
    const wrapper = mountFormula({ showMW: false })
    expect(wrapper.find('.mint-formula-input__mw').exists()).toBe(false)
  })

  it('should emit the molecular weight when the formula changes', async () => {
    const wrapper = mountFormula({ modelValue: '' })
    await wrapper.find('input').setValue('H2O')
    expect(wrapper.emitted('mw')?.[0]?.[0]).toBeCloseTo(18.015, 2)
  })
})

describe('FormulaInput error state (4b)', () => {
  it('should put the field in the error state when a symbol is unknown', () => {
    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
    expect(wrapper.classes()).toContain('mint-formula-input--error')
  })

  it('should mark the input invalid when a symbol is unknown', () => {
    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
    expect(wrapper.find('input').attributes('aria-invalid')).toBe('true')
  })

  it('should name the unknown symbol when parsing fails', () => {
    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
    expect(wrapper.find('.mint-formula-input__error-text').text()).toBe('Unknown element: Xx')
  })

  it('should show the raw text when the formula is invalid', () => {
    const wrapper = mountFormula({ modelValue: 'C6Xx2' })
    expect(wrapper.find('.mint-formula-input__rendered').exists()).toBe(false)
  })

  it('should accept an element outside the common set when the symbol is real', () => {
    const wrapper = mountFormula({ modelValue: 'SeO2' })
    expect(wrapper.find('input').attributes('aria-invalid')).toBeUndefined()
  })

  it('should accept a trailing charge when the formula is an ion', () => {
    const wrapper = mountFormula({ modelValue: 'SO4^2-' })
    expect(wrapper.find('input').attributes('aria-invalid')).toBeUndefined()
  })
})