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

import {
  IconWrapper,
  StyledIcon,
  SpinningIconWrapper,
  SpinningIcon,
} from '../StyledIcon';

describe('IconWrapper', () => {
  it.each`
    color
    ${'inherit'}
    ${'text'}
    ${'subdued-text'}
    ${'disabled-text'}
    ${'primary'}
    ${'info'}
    ${'danger'}
    ${'warning'}
    ${'success'}
    ${'error'}
  `('has $color color style', ({ color }) => {
    const { container } = renderWithTheme(
      <IconWrapper themeColor={color} themeSize="medium" />
    );

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

  it.each`
    size
    ${'inherit'}
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
  `('has $size size style', ({ size }) => {
    const { container } = renderWithTheme(
      <IconWrapper themeColor="primary" themeSize={size} />
    );

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

describe('StyledIcon', () => {
  it.each`
    color
    ${'inherit'}
    ${'text'}
    ${'subdued-text'}
    ${'disabled-text'}
    ${'primary'}
    ${'info'}
    ${'danger'}
    ${'warning'}
    ${'success'}
    ${'error'}
  `('has $color color style', ({ color }) => {
    const { container } = renderWithTheme(
      <StyledIcon themeColor={color} themeSize="medium" />
    );

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

  it.each`
    size
    ${'inherit'}
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
  `('has $size size style', ({ size }) => {
    const { container } = renderWithTheme(
      <StyledIcon themeColor="primary" themeSize={size} />
    );

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

describe('SpinningIconWrapper', () => {
  it.each`
    color
    ${'inherit'}
    ${'text'}
    ${'subdued-text'}
    ${'primary'}
    ${'danger'}
    ${'warning'}
    ${'success'}
    ${'error'}
  `('has $color color style', ({ color }) => {
    const { container } = renderWithTheme(
      <SpinningIconWrapper themeColor={color} themeSize="medium" />
    );

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

  it.each`
    size
    ${'inherit'}
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
  `('has $size size style', ({ size }) => {
    const { container } = renderWithTheme(
      <SpinningIconWrapper themeColor="primary" themeSize={size} />
    );

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

describe('SpinningIcon', () => {
  it.each`
    color
    ${'inherit'}
    ${'text'}
    ${'subdued-text'}
    ${'primary'}
    ${'danger'}
    ${'warning'}
    ${'success'}
    ${'error'}
  `('has $color color style', ({ color }) => {
    const { container } = renderWithTheme(
      <SpinningIcon themeColor={color} themeSize="medium" />
    );

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

  it.each`
    size
    ${'inherit'}
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
  `('has $size size style', ({ size }) => {
    const { container } = renderWithTheme(
      <SpinningIcon themeColor="primary" themeSize={size} />
    );

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