import * as React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import { CCalendar } from '../CCalendar'

describe('CCalendar Basic Tests', () => {
  it('renders without crashing', () => {
    render(<CCalendar />)
    // The calendar renders as a table, so let's check for the table element
    expect(screen.getByRole('table')).toBeInTheDocument()
  })

  it('handles date string correctly (timezone fix regression test)', () => {
    // This test specifically verifies the timezone fix we implemented
    render(<CCalendar calendarDate="2/16/2022" />)
    expect(screen.getByRole('table')).toBeInTheDocument()
    
    // We should see navigation elements
    expect(screen.getByLabelText(/previous month/i)).toBeInTheDocument()
    expect(screen.getByLabelText(/next month/i)).toBeInTheDocument()
  })

  it('handles Date object correctly', () => {
    const testDate = new Date(2022, 1, 16) // February 16, 2022
    render(<CCalendar calendarDate={testDate} />)
    expect(screen.getByRole('table')).toBeInTheDocument()
  })

  it('handles invalid dates gracefully', () => {
    const { container } = render(<CCalendar calendarDate="invalid-date" />)
    // Invalid dates might not render a table, but the component should still render without crashing
    const calendarElement = container.querySelector('.calendars')
    expect(calendarElement).toBeInTheDocument()
  })

  it('handles null dates gracefully', () => {
    render(<CCalendar calendarDate={null} />)
    expect(screen.getByRole('table')).toBeInTheDocument()
  })

  it('supports range selection', () => {
    render(
      <CCalendar 
        range
        startDate="2/16/2022"
        endDate="2/20/2022"
      />
    )
    expect(screen.getByRole('table')).toBeInTheDocument()
  })

  it('supports different locales', () => {
    render(<CCalendar locale="en-US" />)
    expect(screen.getByRole('table')).toBeInTheDocument()
  })

  it('renders navigation controls', () => {
    render(<CCalendar />)
    
    // Check for navigation buttons
    expect(screen.getByLabelText(/previous year/i)).toBeInTheDocument()
    expect(screen.getByLabelText(/previous month/i)).toBeInTheDocument()
    expect(screen.getByLabelText(/next month/i)).toBeInTheDocument()
    expect(screen.getByLabelText(/next year/i)).toBeInTheDocument()
  })

  it('renders calendar grid with days', () => {
    render(<CCalendar />)
    
    // Check for table structure
    expect(screen.getByRole('table')).toBeInTheDocument()
    
    // Check for day cells
    const dayCells = screen.getAllByRole('cell')
    expect(dayCells.length).toBeGreaterThan(0)
    
    // Check for column headers (days of week)
    const columnHeaders = screen.getAllByRole('columnheader')
    expect(columnHeaders.length).toBe(7) // Should have 7 days of the week
  })
})