import React from 'react';
import { fireEvent } from '@testing-library/react';

import { render } from '../../../../vitest/render';
import { RadioGroup } from '../../Inputs/RadioGroup/RadioGroup';

import { RadioField } from './RadioField';

/**
 * Tests accessibility: every radio has an `aria-label` from the option label,
 * present even when the visible label is omitted,
 * and clicking the visible label selects the radio.
 */
const planOptions = [
  { id: 'free', name: 'Free Plan' },
  { id: 'pro', name: 'Pro Plan' },
  { id: 'business', name: 'Business Plan' },
];

function renderPlans() {
  return render(
    <RadioField
      name='plan'
      label='Choose your plan'
      options={planOptions}
      getOptionValue={option => option.id}
      getOptionLabel={option => option.name}
    />
  );
}

describe('RadioField accessibility', () => {
  it('names every radio by its option label', () => {
    const { getByRole } = renderPlans();

    for (const option of planOptions) {
      expect(getByRole('radio', { name: option.name })).toBeTruthy();
    }
  });

  it('selects the radio when its visible label is clicked', () => {
    const { getByRole, getByText } = renderPlans();

    const proRadio = getByRole('radio', { name: 'Pro Plan' }) as HTMLInputElement;
    expect(proRadio.checked).toBe(false);

    fireEvent.click(getByText('Pro Plan'));

    expect((getByRole('radio', { name: 'Pro Plan' }) as HTMLInputElement).checked).toBe(true);
  });

  it('names an image option even though its visible label is an image, not text', () => {
    const imageOptions = [
      { id: 'black', name: 'Black', src: 'black.svg' },
      { id: 'silver', name: 'Silver', src: 'silver.svg' },
    ];

    const { getByRole } = render(
      <RadioField
        name='color'
        label='Choose color'
        options={imageOptions}
        getOptionValue={option => option.id}
        getOptionLabel={option => option.name}
        renderOption={(option, props) => <RadioGroup.ImageOption {...props} src={option.src} />}
      />
    );

    expect(getByRole('radio', { name: 'Black' })).toBeTruthy();
    expect(getByRole('radio', { name: 'Silver' })).toBeTruthy();
  });
});