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

describe('RadioGroup', () => {
  it('renders correctly', () => {
    render(
      <RadioGroup defaultValue="option-one">
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="option-one" id="option-one" />
          <label htmlFor="option-one">Option One</label>
        </div>
        <div className="flex items-center space-x-2">
          <RadioGroupItem value="option-two" id="option-two" />
          <label htmlFor="option-two">Option Two</label>
        </div>
      </RadioGroup>
    );

    expect(screen.getByLabelText('Option One')).toBeInTheDocument();
    expect(screen.getByLabelText('Option Two')).toBeInTheDocument();
  });

  it('changes selection on click', () => {
    const { container } = render(
      <RadioGroup defaultValue="option-one">
        <RadioGroupItem value="option-one" id="option-one" />
        <RadioGroupItem value="option-two" id="option-two" />
      </RadioGroup>
    );

    const radioOne = container.querySelector('[value="option-one"]') as HTMLElement;
    const radioTwo = container.querySelector('[value="option-two"]') as HTMLElement;

    expect(radioOne).toHaveAttribute('data-state', 'checked');
    expect(radioTwo).toHaveAttribute('data-state', 'unchecked');

    fireEvent.click(radioTwo);

    expect(radioOne).toHaveAttribute('data-state', 'unchecked');
    expect(radioTwo).toHaveAttribute('data-state', 'checked');
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <RadioGroup defaultValue="1">
        <RadioGroupItem value="1" id="r1" />
      </RadioGroup>
    );
    expect(container.querySelector('[data-slot="radio-group-item"]')).toBeInTheDocument();
    // Indicator only renders for the checked item
    expect(container.querySelector('[data-slot="radio-group-indicator"]')).toBeInTheDocument();
  });

  it('renders correctly with different sizes', () => {
    const { rerender } = render(
      <RadioGroup>
        <RadioGroupItem value="1" size="sm" />
      </RadioGroup>
    );
    expect(screen.getByRole('radio')).toHaveClass('size-4');

    rerender(
      <RadioGroup>
        <RadioGroupItem value="1" size="md" />
      </RadioGroup>
    );
    expect(screen.getByRole('radio')).toHaveClass('size-5');

    rerender(
      <RadioGroup>
        <RadioGroupItem value="1" size="lg" />
      </RadioGroup>
    );
    expect(screen.getByRole('radio')).toHaveClass('size-6');
  });
});