import React from 'react';

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

import {
  StyledIconWrapper,
  StyledAlert,
  StyledCloseButton,
} from '../StyledAlert';

describe('StyledIconWrapper', () => {
  it('returns default style', () => {
    const { container } = renderWithTheme(
      <StyledIconWrapper themeSize="default" />
    );

    expect(container.firstChild).toHaveStyle(`
      margin-top: ${theme.space.alert.iconDefaultMarginTop};
      margin-right: ${theme.space.alert.iconDefaultMarginRight};
      line-height: ${theme.lineHeights.alert.iconDefault};
    `);
  });

  it('returns compact style', () => {
    const { container } = renderWithTheme(
      <StyledIconWrapper themeSize="compact" />
    );

    expect(container.firstChild).toHaveStyle(`
      margin-top: ${theme.space.alert.iconCompactMarginTop};
      margin-right: ${theme.space.alert.iconCompactMarginRight};
      line-height: ${theme.lineHeights.alert.iconCompact};
    `);
  });

  it('returns inherit color', () => {
    const { container } = renderWithTheme(
      <StyledIconWrapper themeSize="compact" />
    );

    expect(container.firstChild).toHaveStyle(`
      color: inherit;
    `);
  });
});

describe('StyledAlert', () => {
  it('returns correct style', () => {
    const { container } = renderWithTheme(
      <StyledAlert themeIntent="success" themeSize="default" />
    );

    expect(container.firstChild).toHaveStyle(`
      color: ${theme.colors.alert.text};
      border-width: ${theme.borderWidths.alert.wrapper};
    `);
  });

  it('returns default style', () => {
    const { container } = renderWithTheme(
      <StyledAlert themeIntent="success" themeSize="default" />
    );

    expect(container.firstChild).toHaveStyle(`
      padding: ${theme.space.alert.defaultPadding};
    `);
  });

  it('returns compact style', () => {
    const { container } = renderWithTheme(
      <StyledAlert themeIntent="success" themeSize="compact" />
    );

    expect(container.firstChild).toHaveStyle(`
      padding: ${theme.space.alert.compactPadding};
    `);
  });

  it.each`
    themeIntent  | expectedBorderColor
    ${'success'} | ${theme.colors.alert.borderSuccess}
    ${'info'}    | ${theme.colors.alert.borderInfo}
    ${'warning'} | ${theme.colors.alert.borderWarning}
    ${'danger'}  | ${theme.colors.alert.borderDanger}
    ${'error'}   | ${theme.colors.alert.borderError}
  `(
    'returns correct border color when intent is $themeIntent',
    ({ themeIntent, expectedBorderColor }) => {
      const { container } = renderWithTheme(
        <StyledAlert themeIntent={themeIntent} themeSize="compact" />
      );

      expect(container.firstChild).toHaveStyle(`
        border-color: ${expectedBorderColor};
      `);
    }
  );
});

describe('StyledCloseButton', () => {
  it('returns default style', () => {
    const { container } = renderWithTheme(
      <StyledCloseButton themeSize="default" />
    );

    expect(container.firstChild).toHaveStyle(`
      margin-top: ${theme.space.alert.iconDefaultMarginTop};
      line-height: ${theme.lineHeights.alert.iconDefault}
    `);
  });

  it('returns compact style', () => {
    const { container } = renderWithTheme(
      <StyledCloseButton themeSize="compact" />
    );

    expect(container.firstChild).toHaveStyle(`
      margin-right: ${theme.space.alert.iconCompactMarginRight};
      line-height: ${theme.lineHeights.alert.iconCompact}
    `);
  });

  it('returns inherit color', () => {
    const { container } = renderWithTheme(
      <StyledCloseButton themeSize="default" />
    );

    expect(container.firstChild).toHaveStyle(`
      color: inherit;
    `);
  });
});