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 UiCalendar from '../UiCalendar.vue';

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

  test('renders with custom class', () => {
    const { container } = render(UiCalendar, {
      props: { class: 'custom-calendar', defaultPlaceholder: testDate },
    });
    const calendar = container.querySelector('[data-slot="calendar"]');
    expect(calendar).toHaveClass('custom-calendar');
  });

  test('emits update:modelValue when date is selected', async () => {
    const { getAllByRole, emitted } = render(UiCalendar, {
      props: { defaultPlaceholder: testDate },
    });

    const cells = getAllByRole('gridcell');
    const clickableCell = cells.find(
      (cell) => !cell.querySelector('button')?.hasAttribute('data-disabled'),
    );
    const button = clickableCell?.querySelector('button');
    if (!button) {
      throw new Error('Expected an enabled date button');
    }

    await userEvent.click(button);
    expect(emitted('update:modelValue')).toHaveLength(1);
  });

  test('renders custom slot content for navigation icons', () => {
    const { getByText } = render(UiCalendar, {
      props: { defaultPlaceholder: testDate },
      slots: {
        'prev-icon': '<span>←</span>',
        'next-icon': '<span>→</span>',
      },
    });
    expect(getByText('←')).toBeInTheDocument();
    expect(getByText('→')).toBeInTheDocument();
  });
});
