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

describe('DateInputField', () => {
  it('renders a native date input', () => {
    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
    const input = w.find('input[type="date"]')
    expect(input.exists()).toBe(true)
  })

  it('reflects modelValue as the hidden input value', () => {
    const w = mount(DateInputField, { props: { modelValue: '2026-04-15' } })
    const input = w.find<HTMLInputElement>('input[type="date"]')
    expect((input.element as HTMLInputElement).value).toBe('2026-04-15')
  })

  it('emits update:modelValue with the new ISO string when changed', async () => {
    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
    const input = w.find<HTMLInputElement>('input[type="date"]')
    await input.setValue('2026-05-20')
    expect(w.emitted('update:modelValue')).toBeTruthy()
    expect(w.emitted('update:modelValue')![0]).toEqual(['2026-05-20'])
  })

  it('does not emit when no change is triggered', () => {
    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
    expect(w.emitted('update:modelValue')).toBeFalsy()
  })

  it('passes min prop to the native input', () => {
    const w = mount(DateInputField, {
      props: { modelValue: '2026-03-10', min: '2026-02-26' },
    })
    const input = w.find<HTMLInputElement>('input[type="date"]')
    expect((input.element as HTMLInputElement).min).toBe('2026-02-26')
  })

  it('renders without min prop when not provided', () => {
    const w = mount(DateInputField, { props: { modelValue: '2026-03-01' } })
    const input = w.find<HTMLInputElement>('input[type="date"]')
    expect((input.element as HTMLInputElement).min).toBe('')
  })

  it('shows "Select date" placeholder when modelValue is empty', () => {
    const w = mount(DateInputField, { props: { modelValue: '' } })
    expect(w.find('.date-display-btn').text()).toBe('Select date')
  })

  it('shows formatted date with weekday when modelValue is set', () => {
    const w = mount(DateInputField, { props: { modelValue: '2026-03-05' } })
    // Thu, Mar 5, 2026
    const text = w.find('.date-display-btn').text()
    expect(text).toContain('Thu')
    expect(text).toContain('Mar')
    expect(text).toContain('5')
    expect(text).toContain('2026')
  })
})
