import React from 'react';

import renderWithTheme from '../../../../testUtils/renderWithTheme';
import {
  FieldWrapper,
  ValidateIconWrapper,
  ValidateSuffixWrapper,
  TextAreaWrapper,
} from '../StyledField';
import Input from '../../../Input';

describe('FieldWrapper', () => {
  it.each`
    status
    ${'success'}
    ${'error'}
    ${'warning'}
    ${'validating'}
    ${undefined}
  `('has $status style when wrapping Input', ({ status }) => {
    const { container } = renderWithTheme(
      <FieldWrapper themeStatus={status}>
        <Input />
      </FieldWrapper>
    );

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

  it.each`
    status
    ${'success'}
    ${'error'}
    ${'warning'}
    ${'validating'}
    ${undefined}
  `('has $status style when wrapping TextArea', ({ status }) => {
    const { container } = renderWithTheme(
      <FieldWrapper themeStatus={status}>
        <Input.TextArea />
      </FieldWrapper>
    );

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

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

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

describe('ValidateSuffixWrapper', () => {
  it('has correct style', () => {
    const { container } = renderWithTheme(<ValidateSuffixWrapper />);

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

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

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