import { cleanup, render } from '@testing-library/react'
import { afterEach, describe, expect, it, vi } from 'vitest'

import { DateWheel, TimeWheel } from '@/components/events/schedule/EventScheduleFieldControl'

afterEach(cleanup)

describe('Event schedule wheels', () => {
  it('renders the date wheel with Figma typography and a slash divider', () => {
    const { container, getByText } = render(
      <DateWheel
        minDate={new Date(2025, 0, 1)}
        value={{ day: '27', month: '5', year: '1404' }}
        onChange={vi.fn()}
      />
    )

    expect(getByText('/')).toHaveClass('text-xl', 'font-semibold')
    expect(getByText('مرداد')).toHaveAttribute('data-selected', 'true')
    expect(getByText('مرداد')).toHaveClass('text-xl', 'font-semibold', 'text-consumer-text')
    expect(getByText('تیر')).toHaveClass('text-lg', 'text-secondary-40')
    expect(container.querySelector('.consumer-wheel-picker')).toBeInTheDocument()
  })

  it('renders the time wheel with unpadded values and a colon divider', () => {
    const { container, getByText } = render(
      <TimeWheel
        minValue={0}
        value={{ hour: '10', minute: '0' }}
        onChange={vi.fn()}
      />
    )

    expect(getByText(':')).toHaveClass('text-xl', 'font-semibold')

    const selectedItems = Array.from(container.querySelectorAll('[data-selected="true"]'))

    expect(selectedItems.map((item) => item.textContent)).toEqual(['۱۰', '۰'])
    expect(selectedItems.every((item) => item.classList.contains('text-xl'))).toBe(true)
  })
})