import React from 'react';

import renderWithTheme from '../../../testUtils/renderWithTheme';

import { StyledButton, StyledIconButton } from '../StyledButton';

describe('StyledButton', () => {
  it('has no-loading style', () => {
    const { container } = renderWithTheme(
      <StyledButton themeSize="medium" themeVariant="basic" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it.each`
    themeVariant
    ${'basic'}
    ${'basic-transparent'}
    ${'filled-primary'}
    ${'filled-success'}
    ${'filled-danger'}
    ${'filled-warning'}
    ${'filled-error'}
    ${'outlined-primary'}
    ${'outlined-success'}
    ${'outlined-danger'}
    ${'outlined-warning'}
    ${'outlined-error'}
    ${'text-primary'}
    ${'text-success'}
    ${'text-danger'}
    ${'text-warning'}
    ${'text-error'}
    ${'filled-reversed-primary'}
    ${'filled-reversed-success'}
    ${'filled-reversed-danger'}
    ${'filled-reversed-warning'}
    ${'filled-reversed-error'}
  `(
    'has loading with correct variant $themeVariant style',
    ({ themeVariant }) => {
      const { container } = renderWithTheme(
        <StyledButton loading themeSize="medium" themeVariant={themeVariant} />
      );

      expect(container.firstChild).toMatchSnapshot();
    }
  );

  it.each`
    size
    ${'small'}
    ${'medium'}
    ${'large'}
  `('has $size style', ({ size }) => {
    const { container } = renderWithTheme(
      <StyledButton themeSize={size} themeVariant="basic" />
    );

    expect(container.firstChild).toMatchSnapshot();
  });

  it.each`
    themeVariant
    ${'basic'}
    ${'basic-transparent'}
    ${'filled-primary'}
    ${'filled-success'}
    ${'filled-danger'}
    ${'filled-warning'}
    ${'filled-error'}
    ${'outlined-primary'}
    ${'outlined-success'}
    ${'outlined-danger'}
    ${'outlined-warning'}
    ${'outlined-error'}
    ${'text-primary'}
    ${'text-success'}
    ${'text-danger'}
    ${'text-warning'}
    ${'text-error'}
    ${'filled-reversed-primary'}
    ${'filled-reversed-success'}
    ${'filled-reversed-danger'}
    ${'filled-reversed-warning'}
    ${'filled-reversed-error'}
  `('has $themeVariant style', ({ themeVariant }) => {
    const { container } = renderWithTheme(
      <StyledButton themeSize="medium" themeVariant={themeVariant} />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});

describe('StyledIconButton', () => {
  it.each`
    size
    ${'small'}
    ${'medium'}
    ${'large'}
  `('has $size style', ({ size }) => {
    const { container } = renderWithTheme(
      <StyledIconButton themeSize={size} />
    );

    expect(container.firstChild).toMatchSnapshot();
  });
});