import React from 'react';

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

import StyledInput, { InputWrapper, AffixWrapper } from '../StyledInput';

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

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

  it.each`
    state
    ${'enabled'}
    ${'disabled'}
    ${'invalid'}
  `('has $state style', ({ state }) => {
    const { container } = renderWithTheme(
      <InputWrapper themeSize="medium" themeState={state} />
    );

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

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

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

describe('AffixWrapper', () => {
  it.each`
    margin    | size
    ${'auto'} | ${'medium'}
    ${'none'} | ${'medium'}
    ${'auto'} | ${'small'}
    ${'auto'} | ${'medium'}
    ${'auto'} | ${'large'}
  `('has $margin margin and $size style', ({ margin, size }) => {
    const { container } = renderWithTheme(
      <AffixWrapper themeMarginLeft={margin} themeSize={size} />
    );

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