import { render, screen, userEvent } from '../test-utils';
import RadioOption, { type RadioOptionProps } from '.';

describe('Radio option', () => {
  const initialProps = {
    id: 'componentId',
    name: 'componentName',
    title: 'Component Title',
    content: <img alt="contentImage" />,
    onChange: jest.fn(),
  };

  const customRender = (overrides: Partial<RadioOptionProps> = {}) =>
    render(<RadioOption {...initialProps} {...overrides} />);

  it('should render `media`', () => {
    const Icon = <img alt="media" />;
    customRender({ media: Icon });
    expect(screen.getByRole('img', { name: 'media' })).toBeInTheDocument();
  });

  it('passes props to radio button', () => {
    customRender();
    expect(screen.getByRole('radio')).toHaveAttribute('id', initialProps.id);
  });

  it('passes name to radio button', () => {
    customRender();
    expect(screen.getByRole('radio')).toHaveAttribute('name', initialProps.name);
  });

  describe('checked', () => {
    it('should be `false` by default', () => {
      customRender();
      expect(screen.getByRole('radio')).not.toBeChecked();
    });

    it('should respect the prop', () => {
      customRender({ checked: true });
      expect(screen.getByRole('radio')).toBeChecked();
    });
  });

  it('passes change handler to radio button', async () => {
    customRender();
    await userEvent.click(screen.getByRole('radio'));
    expect(initialProps.onChange).toHaveBeenCalledTimes(1);
  });

  describe('disabled', () => {
    it('should be `false` by default', () => {
      customRender();
      expect(screen.getByRole('radio')).toBeEnabled();
    });

    it('should respect the prop', () => {
      customRender({ disabled: true });
      expect(screen.getByRole('radio')).toBeDisabled();
    });
  });

  describe('isContainerAligned', () => {
    it('should not be aligned by default', () => {
      const { container } = customRender();
      expect(container.querySelector('.np-option')).not.toHaveClass('np-option__container-aligned');
    });

    it('renders aligned with container content', () => {
      const { container } = customRender({ isContainerAligned: true });
      expect(container.querySelector('.np-option')).toHaveClass('np-option__container-aligned');
    });
  });
});