import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import { describe, expect, it } from 'vitest'
import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
import DateTimePicker from '../../components/DateTimePicker.vue'

describe('DateTimePicker', () => {
  it('uses the shared calendar panel and keeps time selection working', async () => {
    const wrapper = mount(DateTimePicker, {
      props: {
        modelValue: '2026-04-22T14:30',
      },
    })

    await wrapper.find('input').trigger('click')
    await nextTick()

    expect(wrapper.findComponent(CalendarGridPanelInternal).exists()).toBe(true)
    expect(wrapper.find('.mint-date-picker__day--selected').text()).toBe('22')

    const timeButton = wrapper.findAll('.mint-datetime-picker__time-chip')
      .find((button) => button.text() === '09:00')
    expect(timeButton).toBeDefined()

    await timeButton?.trigger('click')

    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-04-22T09:00'])
  })

  it('uses shared dropdown state for Escape close behavior', async () => {
    const wrapper = mount(DateTimePicker, {
      props: {
        modelValue: '2026-04-22T14:30',
      },
      attachTo: document.body,
    })

    await wrapper.find('input').trigger('click')
    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(true)

    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
    await nextTick()

    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(false)

    wrapper.unmount()
  })

  it('opens from the keyboard, focuses the calendar, and restores focus on close', async () => {
    const wrapper = mount(DateTimePicker, {
      props: { modelValue: '2026-04-22T14:30' },
      attachTo: document.body,
    })
    const input = wrapper.get<HTMLInputElement>('input').element

    await wrapper.get('input').trigger('keydown', { key: 'ArrowDown' })
    await nextTick()
    await nextTick()
    await nextTick()

    expect(wrapper.find('.mint-datetime-picker__dropdown').exists()).toBe(true)
    expect(document.activeElement).toBe(wrapper.get('.mint-date-picker__day--selected').element)

    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
    await nextTick()
    await nextTick()

    expect(document.activeElement).toBe(input)

    wrapper.unmount()
  })

  it('marks the panel as a non-modal dialog', async () => {
    const wrapper = mount(DateTimePicker, { attachTo: document.body })

    await wrapper.get('input').trigger('click')

    const panel = wrapper.get('.mint-datetime-picker__dropdown')
    expect(panel.attributes('role')).toBe('dialog')
    expect(panel.attributes('aria-modal')).toBeUndefined()

    wrapper.unmount()
  })
})