import { CalendarDate } from '@internationalized/date';
import { render } from '@testing-library/vue';
import userEvent from '@testing-library/user-event';
import { describe, expect, test } from 'vitest';
import UiRangeCalendar from '../UiRangeCalendar.vue';

describe('UiRangeCalendar', () => {
  const testDate = new CalendarDate(2025, 1, 15);

  test('emits update:modelValue with DateRange when dates are selected', async () => {
    const { getAllByRole, emitted } = render(UiRangeCalendar, {
      props: { defaultPlaceholder: testDate },
    });

    const cells = getAllByRole('gridcell');
    const clickableCells = cells.filter(
      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
    );
    const firstButton = clickableCells[0]?.querySelector('button');
    const secondButton = clickableCells[5]?.querySelector('button');

    if (!firstButton || !secondButton) {
      throw new Error('Expected two enabled date buttons');
    }

    await userEvent.click(firstButton);
    await userEvent.click(secondButton);

    const emissions = emitted('update:modelValue');
    if (!emissions) {
      throw new Error('Expected update:modelValue to be emitted');
    }

    const lastEmission = emissions[emissions.length - 1][0];
    expect(lastEmission).toHaveProperty('start');
    expect(lastEmission).toHaveProperty('end');
  });
});
