import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Calendar } from './calendar';
import React from 'react';

describe('Calendar', () => {
  it('renders correctly', () => {
    const date = new Date(2024, 0, 1); // Jan 1, 2024
    render(<Calendar month={date} />);

    // Check if month name is present
    expect(screen.getByText('January 2024')).toBeInTheDocument();
  });

  it('calls onSelect when a day is clicked', () => {
    const onSelect = vi.fn();
    const date = new Date(2024, 0, 1);
    render(<Calendar month={date} mode="single" onSelect={onSelect} />);

    // Day 15 of January
    const day15 = screen.getByText('15');
    fireEvent.click(day15);

    expect(onSelect).toHaveBeenCalled();
  });

  it('renders correctly in range mode', () => {
    const date = new Date(2024, 0, 1);
    const range = {
      from: new Date(2024, 0, 10),
      to: new Date(2024, 0, 20),
    };
    render(<Calendar month={date} mode="range" selected={range} />);

    // Check if range start and end dates have correct data attributes
    const startDay = screen.getByText('10').closest('button');
    const endDay = screen.getByText('20').closest('button');

    expect(startDay).toHaveAttribute('data-range-start', 'true');
    expect(endDay).toHaveAttribute('data-range-end', 'true');
  });

  it('has correct data-slot attribute', () => {
    const { container } = render(<Calendar />);
    expect(container.querySelector('[data-slot="calendar"]')).toBeInTheDocument();
  });

  it('renders dropdown caption controls', () => {
    render(<Calendar captionLayout="dropdown" />);
    const selects = screen.getAllByRole('combobox');
    expect(selects.length).toBeGreaterThan(0);
  });
});