import { Plus } from '@transferwise/icons';

import { ControlType, Priority } from '../common';
import { render, screen, userEvent, mockMatchMedia } from '../test-utils';

import CircularButton from './CircularButton';

mockMatchMedia();

const { ACCENT, POSITIVE, NEGATIVE } = ControlType;
const { PRIMARY, SECONDARY } = Priority;

describe('CircularButton', () => {
  const props = {
    children: 'Add money',
    icon: <Plus />,
    onClick: jest.fn(),
  };

  describe('defaults', () => {
    beforeEach(() => {
      render(<CircularButton {...props} />);
    });

    it('renders the text', () => {
      expect(screen.getByText('Add money')).toBeInTheDocument();
    });

    it('renders the provided icon', () => {
      const icon = document.querySelector('.tw-icon');
      expect(icon).toBeInTheDocument();
    });

    it('is not disabled', () => {
      expect(screen.getByRole('button')).toBeEnabled();
    });
  });

  describe('button attributes', () => {
    it('disables the button if disabled', () => {
      render(<CircularButton {...props} disabled />);
      expect(screen.getByRole('button')).toBeDisabled();
    });

    it('passes through custom classes if set', () => {
      render(<CircularButton {...props} className="have-a-nice-day-:)" />);
      const label = document.querySelector('label');

      expect(label).toHaveClass('have-a-nice-day-:)');
    });
  });

  describe('onClick', () => {
    it('calls onClick when clicked', async () => {
      const onClick = jest.fn();
      render(<CircularButton {...props} onClick={onClick} />);
      await userEvent.click(screen.getByRole('button'));
      expect(onClick).toHaveBeenCalledTimes(1);
    });

    it('does not call onClick when clicked if disabled', async () => {
      const onClick = jest.fn();
      render(<CircularButton {...props} disabled onClick={onClick} />);
      await userEvent.click(screen.getByRole('button'));
      expect(onClick).toHaveBeenCalledTimes(0);
    });
  });
});