import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import CalendarGridPanelInternal from '../../components/internal/CalendarGridPanelInternal.vue'
import type { CalendarGridDay } from '../../composables/useCalendarGrid'

const days: CalendarGridDay[] = [
  { date: new Date(2026, 3, 20), isCurrentMonth: true, isDisabled: false },
  { date: new Date(2026, 3, 21), isCurrentMonth: true, isDisabled: false },
  { date: new Date(2026, 3, 22), isCurrentMonth: true, isDisabled: true },
]

describe('CalendarGridPanelInternal', () => {
  it('renders calendar state and emits navigation and selection events', async () => {
    const wrapper = mount(CalendarGridPanelInternal, {
      props: {
        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        monthYear: 'April 2026',
        days,
        selectedDate: days[1].date,
      },
    })

    expect(wrapper.text()).toContain('April 2026')
    expect(wrapper.findAll('.mint-date-picker__weekday')).toHaveLength(7)
    expect(wrapper.find('.mint-date-picker__day--selected').text()).toBe('21')

    const buttons = wrapper.findAll('button')
    await buttons[0].trigger('click')
    await buttons[1].trigger('click')
    await wrapper.findAll('.mint-date-picker__day')[0].trigger('click')

    expect(wrapper.emitted('previous-month')).toHaveLength(1)
    expect(wrapper.emitted('next-month')).toHaveLength(1)
    expect(wrapper.emitted('select')?.[0]).toEqual([days[0]])
  })

  it('should keep the today marker on a selected day when today is selected', () => {
    const today = new Date()
    const wrapper = mount(CalendarGridPanelInternal, {
      props: {
        weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        monthYear: 'Today',
        days: [{ date: today, isCurrentMonth: true, isDisabled: false }],
        selectedDate: today,
      },
    })

    expect(wrapper.get('.mint-date-picker__day--selected').classes()).toContain('mint-date-picker__day--today')
  })
})