import AvatarView from '../avatarView';
import { render, screen, mockMatchMedia } from '../test-utils';
import { userEvent } from '@testing-library/user-event';

import Radio from '.';

jest.mock('../common/hooks');
mockMatchMedia();

describe('Radio', () => {
  const props = {
    label: 'This is a label',
    name: 'name',
    onChange: jest.fn(),
    checked: false,
    disabled: false,
    secondary: '',
  };

  it('shows the avatar when supplied', () => {
    render(<Radio {...props} avatar={<AvatarView profileName="High Def" />} />);
    expect(screen.getByText('HD')).toBeInTheDocument();
  });

  it('displays the given label', () => {
    render(<Radio {...props} />);
    expect(screen.getByText(props.label)).toBeInTheDocument();
  });

  it('passes radio button id', () => {
    render(<Radio {...props} id="some-id" />);
    expect(screen.getByRole('radio')).toHaveAttribute('id', 'some-id');
  });

  it('passes radio button name', () => {
    render(<Radio {...props} name="a-name" />);
    expect(screen.getByRole('radio')).toHaveAttribute('name', 'a-name');
  });

  it('handles checked state correctly', () => {
    render(<Radio {...props} checked />);
    expect(screen.getByRole('radio')).toBeChecked();
  });

  it('handles unchecked state correctly', () => {
    render(<Radio {...props} checked={false} />);
    expect(screen.getByRole('radio')).not.toBeChecked();
  });

  it('handles disabled state correctly', () => {
    render(<Radio {...props} disabled />);
    expect(screen.getByRole('radio')).toBeDisabled();
  });

  it('displays secondary text when supplied', () => {
    render(<Radio {...props} secondary="additional info" />);
    expect(screen.getByText('additional info')).toBeInTheDocument();
  });

  it('calls onChange when clicked', async () => {
    const onChange = jest.fn();
    render(<Radio {...props} onChange={onChange} />);
    await userEvent.click(screen.getByRole('radio'));
    expect(onChange).toHaveBeenCalled();
  });

  it('does not call onChange when disabled', async () => {
    const onChange = jest.fn();
    render(<Radio {...props} disabled onChange={onChange} />);
    await userEvent.click(screen.getByRole('radio'));
    expect(onChange).not.toHaveBeenCalled();
  });
});