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

import {
  StyledWrapper,
  StyledInputWrapper,
  StyledInput,
  StyledSlider,
  StyledIconWrapper,
  StyledLoadingIconWrapper,
} from '../StyledSwitch';

describe('StyledWrapper', () => {
  it('has loading style', () => {
    const { container } = renderWithTheme(<StyledWrapper themeLoading />);

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

  it('has normal style', () => {
    const { container } = renderWithTheme(
      <StyledWrapper themeLoading={false} />
    );

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

describe('StyledInputWrapper', () => {
  it('has small style', () => {
    const { container } = renderWithTheme(
      <StyledInputWrapper themeSize="small" />
    );

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

  it('has medium style', () => {
    const { container } = renderWithTheme(
      <StyledInputWrapper themeSize="medium" />
    );

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

describe('StyledSlider', () => {
  it.each`
    disabled | size
    ${true}  | ${'small'}
    ${true}  | ${'medium'}
    ${false} | ${'small'}
    ${false} | ${'medium'}
  `('has $size style when disabled is $disabled', ({ disabled, size }) => {
    const { container } = renderWithTheme(
      <StyledSlider themeDisabled={disabled} themeSize={size} />
    );

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

describe('StyledIconWrapper', () => {
  it.each`
    disabled | size
    ${true}  | ${'small'}
    ${true}  | ${'medium'}
    ${false} | ${'small'}
    ${false} | ${'medium'}
  `('has $size style when disabled is $disabled', ({ disabled, size }) => {
    const { container } = renderWithTheme(
      <StyledIconWrapper themeDisabled={disabled} themeSize={size} />
    );

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

describe('StyledLoadingIconWrapper', () => {
  it.each`
    disabled | size
    ${true}  | ${'small'}
    ${true}  | ${'medium'}
    ${false} | ${'small'}
    ${false} | ${'medium'}
  `('has $size style when disabled is $disabled', ({ disabled, size }) => {
    const { container } = renderWithTheme(
      <StyledLoadingIconWrapper themeDisabled={disabled} themeSize={size} />
    );

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

describe('StyledInput', () => {
  it.each`
    disabled | size
    ${true}  | ${'small'}
    ${true}  | ${'medium'}
    ${false} | ${'small'}
    ${false} | ${'medium'}
  `('has $size style when disabled is $disabled', ({ disabled, size }) => {
    const { container } = renderWithTheme(
      <StyledInput themeDisabled={disabled} themeSize={size} />
    );

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