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

import Button from '..';
import { getThemeVariant } from '../Button';

describe('Button', () => {
  it('renders button text', () => {
    const { getByText } = renderWithTheme(<Button text="A button" />);
    expect(getByText('A button')).toBeInTheDocument();
  });

  it('renders no icon by default', () => {
    const { container } = renderWithTheme(<Button text="A button" />);
    expect(container.querySelectorAll('i')).toHaveLength(0);
  });

  it('renders icon', () => {
    const { container } = renderWithTheme(
      <Button text="A button" icon="heart" />
    );
    expect(container.querySelectorAll('i')).toHaveLength(1);
  });

  it('renders right icon', () => {
    const { container } = renderWithTheme(
      <Button text="A button" rightIcon="heart" />
    );
    expect(container.querySelectorAll('i')).toHaveLength(1);
  });

  it('renders loading icon', () => {
    const { container } = renderWithTheme(<Button text="A button" loading />);
    expect(container.querySelectorAll('i')).toHaveLength(1);
  });

  describe('interaction', () => {
    describe('button is disabled', () => {
      it('NOT allows to click on', () => {
        const onClick = jest.fn();
        const { getByText } = renderWithTheme(
          <Button text="A button" disabled onClick={onClick} />
        );
        fireEvent.click(getByText('A button'));
        expect(onClick).not.toHaveBeenCalled();
      });
    });

    describe('button is enabled', () => {
      it('allows to click on', () => {
        const onClick = jest.fn();
        const { getByText } = renderWithTheme(
          <Button text="A button" onClick={onClick} />
        );
        fireEvent.click(getByText('A button'));
        expect(onClick).toHaveBeenCalledTimes(1);
      });

      it('allows to blur', () => {
        const onBlur = jest.fn();
        const { getByText } = renderWithTheme(
          <Button text="A button" onBlur={onBlur} />
        );
        fireEvent.focus(getByText('A button'));
        fireEvent.blur(getByText('A button'));
        expect(onBlur).toHaveBeenCalledTimes(1);
      });
    });
  });
});

describe('getThemeVariant', () => {
  it.each`
    variant                | intent       | themeVariant
    ${'basic'}             | ${'primary'} | ${'basic'}
    ${'basic-transparent'} | ${'primary'} | ${'basic-transparent'}
    ${'filled'}            | ${'primary'} | ${'filled-primary'}
    ${'filled'}            | ${'success'} | ${'filled-success'}
    ${'filled'}            | ${'danger'}  | ${'filled-danger'}
    ${'filled'}            | ${'warning'} | ${'filled-warning'}
    ${'filled'}            | ${'error'}   | ${'filled-error'}
    ${'outlined'}          | ${'primary'} | ${'outlined-primary'}
    ${'outlined'}          | ${'success'} | ${'outlined-success'}
    ${'outlined'}          | ${'danger'}  | ${'outlined-danger'}
    ${'outlined'}          | ${'warning'} | ${'outlined-warning'}
    ${'outlined'}          | ${'error'}   | ${'outlined-error'}
    ${'text'}              | ${'primary'} | ${'text-primary'}
    ${'text'}              | ${'success'} | ${'text-success'}
    ${'text'}              | ${'danger'}  | ${'text-danger'}
    ${'text'}              | ${'warning'} | ${'text-warning'}
    ${'text'}              | ${'error'}   | ${'text-error'}
    ${'filled-reversed'}   | ${'primary'} | ${'filled-reversed-primary'}
    ${'filled-reversed'}   | ${'success'} | ${'filled-reversed-success'}
    ${'filled-reversed'}   | ${'danger'}  | ${'filled-reversed-danger'}
    ${'filled-reversed'}   | ${'warning'} | ${'filled-reversed-warning'}
    ${'filled-reversed'}   | ${'error'}   | ${'filled-reversed-error'}
  `('returns $themeVariant', ({ variant, intent, themeVariant }) => {
    expect(getThemeVariant(variant, intent)).toBe(themeVariant);
  });
});