import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { RadioGroup, RadioGroupItem } from './radio-group';

describe('RadioGroup Component', () => {
  it('renders radio group', () => {
    render(
      <RadioGroup>
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    const radios = screen.getAllByRole('radio');
    expect(radios).toHaveLength(2);
    expect(radios[0]).toHaveAttribute('value', 'option1');
    expect(radios[1]).toHaveAttribute('value', 'option2');
  });

  it('handles defaultValue (via controlled value)', () => {
    // Note: RadioGroup utilise seulement value (mode contrôlé)
    // Pour tester defaultValue, on utilise value avec un état contrôlé
    render(
      <RadioGroup value="option1">
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    const radios = screen.getAllByRole('radio');
    const option1 = radios.find((r) => r.getAttribute('value') === 'option1');
    const option2 = radios.find((r) => r.getAttribute('value') === 'option2');

    expect(option1).toBeChecked();
    expect(option2).not.toBeChecked();
  });

  it('handles controlled value', () => {
    const { rerender } = render(
      <RadioGroup value="option1">
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    let radios = screen.getAllByRole('radio');
    const option1 = radios.find((r) => r.getAttribute('value') === 'option1');
    expect(option1).toBeChecked();

    rerender(
      <RadioGroup value="option2">
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    radios = screen.getAllByRole('radio');
    const option2 = radios.find((r) => r.getAttribute('value') === 'option2');
    expect(option2).toBeChecked();
  });

  it('calls onValueChange when selection changes', () => {
    const handleChange = vi.fn();
    render(
      <RadioGroup onValueChange={handleChange}>
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    const radios = screen.getAllByRole('radio');
    const option2 = radios.find((r) => r.getAttribute('value') === 'option2');
    fireEvent.click(option2!);

    expect(handleChange).toHaveBeenCalledWith('option2');
  });

  it('handles disabled state', () => {
    render(
      <RadioGroup disabled>
        <RadioGroupItem value="option1" />
        <RadioGroupItem value="option2" />
      </RadioGroup>,
    );

    const radios = screen.getAllByRole('radio');
    expect(radios[0]).toBeDisabled();
    expect(radios[1]).toBeDisabled();
  });

  it('applies custom className', () => {
    const { container } = render(
      <RadioGroup className="custom-radio-group">
        <RadioGroupItem value="option1" />
      </RadioGroup>,
    );

    const radioGroup = container.querySelector('.custom-radio-group');
    expect(radioGroup).toBeInTheDocument();
  });
});
