import React from 'react';

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

import { StyledBox } from '../StyledBox';

describe('StyledBox', () => {
  it.each`
    color
    ${'black'}
    ${'blue'}
    ${'blue-dark-30'}
    ${'blue-dark-75'}
    ${'blue-light-30'}
    ${'blue-light-75'}
    ${'blue-light-90'}
    ${'dodger-blue'}
    ${'green'}
    ${'green-dark-15'}
    ${'green-dark-30'}
    ${'green-dark-75'}
    ${'green-light-30'}
    ${'green-light-90'}
    ${'grey'}
    ${'grey-dark-30'}
    ${'grey-dark-45'}
    ${'grey-dark-75'}
    ${'grey-light-45'}
    ${'grey-light-60'}
    ${'grey-light-75'}
    ${'grey-light-85'}
    ${'grey-light-90'}
    ${'grotesque-green'}
    ${'grotesque-green-light-60'}
    ${'grotesque-green-light-90'}
    ${'orange'}
    ${'orange-dark-15'}
    ${'orange-dark-30'}
    ${'orange-dark-75'}
    ${'orange-light-30'}
    ${'orange-light-75'}
    ${'orange-light-90'}
    ${'pink'}
    ${'pink-dark-15'}
    ${'pink-dark-30'}
    ${'pink-dark-75'}
    ${'pink-light-30'}
    ${'pink-light-45'}
    ${'pink-light-75'}
    ${'pink-light-90'}
    ${'purple'}
    ${'red'}
    ${'red-dark-15'}
    ${'red-dark-30'}
    ${'red-dark-75'}
    ${'red-light-30'}
    ${'red-light-75'}
    ${'red-light-90'}
    ${'smalt'}
    ${'smalt-dark-75'}
    ${'smalt-light-30'}
    ${'smalt-light-45'}
    ${'smalt-light-90'}
    ${'violet'}
    ${'violet-dark-30'}
    ${'violet-dark-45'}
    ${'violet-dark-75'}
    ${'violet-light-30'}
    ${'violet-light-60'}
    ${'violet-light-75'}
    ${'violet-light-90'}
    ${'white'}
    ${'yellow'}
    ${'yellow-dark-75'}
    ${undefined}
  `('has $color background, $color border, $color text', ({ color }) => {
    const { container } = renderWithTheme(
      <StyledBox
        themeBgColor={color}
        themeBorderColor={color}
        themeColor={color}
      />
    );

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

  it.each`
    space
    ${'xxsmall'}
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
    ${'xxlarge'}
    ${'xxxlarge'}
    ${'xxxxlarge'}
    ${undefined}
  `('has $space margin, padding', ({ space }) => {
    const { container } = renderWithTheme(
      <StyledBox
        themeMargin={space}
        themeMarginBottom={space}
        themeMarginLeft={space}
        themeMarginRight={space}
        themeMarginTop={space}
        themePadding={space}
        themePaddingBottom={space}
        themePaddingLeft={space}
        themePaddingRight={space}
        themePaddingTop={space}
      />
    );

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

  it.each`
    borderStyle
    ${undefined}
    ${'dotted'}
    ${'dashed'}
    ${'solid'}
  `('has $borderStyle border', ({ borderStyle }) => {
    const { container } = renderWithTheme(
      <StyledBox themeBorderStyle={borderStyle} />
    );

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

  it.each`
    borderKey
    ${undefined}
    ${'base'}
    ${'medium'}
  `('has $borderKey border radius, border width', ({ borderKey }) => {
    const { container } = renderWithTheme(
      <StyledBox themeBorderRadius={borderKey} themeBorderWidth={borderKey} />
    );

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

  it.each`
    size
    ${'xsmall'}
    ${'small'}
    ${'medium'}
    ${'large'}
    ${'xlarge'}
    ${'xxlarge'}
    ${'xxxlarge'}
    ${'xxxxlarge'}
    ${'xxxxxlarge'}
    ${undefined}
  `('has $size font size, line height', ({ size }) => {
    const { container } = renderWithTheme(
      <StyledBox themeFontSize={size} themeLineHeight={size} />
    );

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

  it.each`
    fontWeight
    ${'light'}
    ${'regular'}
    ${'semi-bold'}
    ${'bold'}
    ${undefined}
  `('has $fontWeight font weight', ({ fontWeight }) => {
    const { container } = renderWithTheme(
      <StyledBox themeFontWeight={fontWeight} />
    );

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