import React from 'react';

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

import {
  StyledButtonWrapper,
  StyledButtonList,
  StyledButton,
  CarouselSlideCollection,
  StyledButtonIconWrapper,
} from '../StyledCarousel';

describe('StyledButtonWrapper', () => {
  it('has row style', () => {
    const { container } = renderWithTheme(
      <StyledButtonWrapper themeDotDirection="row" themeDotPlacement="top" />
    );

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

  it('has column style', () => {
    const { container } = renderWithTheme(
      <StyledButtonWrapper
        themeDotDirection="column"
        themeDotPlacement="right"
      />
    );

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

  it.each`
    placement   | direction
    ${'top'}    | ${'row'}
    ${'bottom'} | ${'row'}
    ${'left'}   | ${'column'}
    ${'right'}  | ${'column'}
  `('has $placement style', ({ placement, direction }) => {
    const { container } = renderWithTheme(
      <StyledButtonWrapper
        themeDotDirection={direction}
        themeDotPlacement={placement}
      />
    );

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

describe('StyledButtonList', () => {
  it.each`
    state
    ${'activeRow'}
    ${'defaultRow'}
    ${'activeColumn'}
    ${'defaultColumn'}
  `('has $state style', ({ state }) => {
    const { container } = renderWithTheme(
      <StyledButtonList themeDotState={state} />
    );

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

describe('StyledButton', () => {
  it.each`
    description   | active   | direction   | variant
    ${'active'}   | ${true}  | ${'row'}    | ${'light'}
    ${'inactive'} | ${false} | ${'row'}    | ${'light'}
    ${'row'}      | ${true}  | ${'row'}    | ${'light'}
    ${'column'}   | ${true}  | ${'column'} | ${'light'}
    ${'light'}    | ${true}  | ${'row'}    | ${'light'}
    ${'dark'}     | ${true}  | ${'row'}    | ${'dark'}
  `('has $description style', ({ active, direction, variant }) => {
    const { container } = renderWithTheme(
      <StyledButton
        active={active}
        themeDotDirection={direction}
        themeVariant={variant}
      />
    );

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

describe('CarouselSlideCollection', () => {
  it.each`
    currentSlide | direction
    ${1}         | ${'row'}
    ${1}         | ${'column'}
  `('has $direction style', ({ currentSlide, direction }) => {
    const { container } = renderWithTheme(
      <CarouselSlideCollection
        currentSlide={currentSlide}
        themeDotDirection={direction}
      />
    );

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

describe('StyledButtonIconWrapper', () => {
  it.each`
    description      | placement        | variant
    ${'middleRow'}   | ${'middleRow'}   | ${'light'}
    ${'leftColumn'}  | ${'leftColumn'}  | ${'light'}
    ${'rightColumn'} | ${'rightColumn'} | ${'light'}
    ${'light'}       | ${'middleRow'}   | ${'light'}
    ${'dark'}        | ${'middleRow'}   | ${'dark'}
  `('has $description style', ({ placement, variant }) => {
    const { container } = renderWithTheme(
      <StyledButtonIconWrapper
        themeButtonPlacement={placement}
        themeVariant={variant}
      />
    );

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