import React from 'react';

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

import { StyledBadge, StatusBadge, CountNumberBadge } from '../StyledBadge';

describe('StyledBadge', () => {
  it('has basic style when intent is basic', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="basic" themePadding="narrowContent" />
    );

    expect(container.firstChild).toHaveStyle(`
      background-color: ${theme.colors.badge.basicBackground};
      border-color: ${theme.colors.badge.border};
      color: ${theme.colors.badge.basicText};
    `);
  });

  it('has success style when intent is success', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="success" themePadding="narrowContent" />
    );

    expect(container.firstChild).toHaveStyle(`
      background-color: ${theme.colors.badge.success};
      border-color: ${theme.colors.badge.success};
      color: ${theme.colors.badge.text};
    `);
  });

  it('has primary style when intent is primary', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="primary" themePadding="narrowContent" />
    );

    expect(container.firstChild).toHaveStyle(`
      background-color: ${theme.colors.badge.primary};
      border-color: ${theme.colors.badge.primary};
      color: ${theme.colors.badge.text};
    `);
  });

  it('has warning style when intent is warning', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="warning" themePadding="narrowContent" />
    );

    expect(container.firstChild).toHaveStyle(`
      background-color: ${theme.colors.badge.warning};
      border-color: ${theme.colors.badge.warning};
      color: ${theme.colors.badge.text};
    `);
  });

  it('has danger style when intent is danger', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="danger" themePadding="narrowContent" />
    );

    expect(container.firstChild).toHaveStyle(`
      background-color: ${theme.colors.badge.danger};
      border-color: ${theme.colors.badge.danger};
      color: ${theme.colors.badge.text};
    `);
  });

  it('has error style when intent is error', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="error" themePadding="narrowContent" />
    );

    expect(container.firstChild).toHaveStyle(`
      background-color: ${theme.colors.badge.error};
      border-color: ${theme.colors.badge.error};
      color: ${theme.colors.badge.text};
    `);
  });

  it('has narrowContent style', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="basic" themePadding="narrowContent" />
    );

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

  it('has wideContent style', () => {
    const { container } = renderWithTheme(
      <StyledBadge themeIntent="basic" themePadding="wideContent" />
    );

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

describe('StatusBadge', () => {
  it.each`
    intent       | expectedBackground
    ${'basic'}   | ${theme.colors.badge.basicStatusText}
    ${'success'} | ${theme.colors.badge.success}
    ${'primary'} | ${theme.colors.badge.primary}
    ${'warning'} | ${theme.colors.badge.warning}
    ${'danger'}  | ${theme.colors.badge.danger}
    ${'error'}   | ${theme.colors.badge.error}
  `(
    'has $expectedBackground background when intent is $intent',
    ({ intent, expectedBackground }) => {
      const { container } = renderWithTheme(
        <StatusBadge themeIntent={intent} />
      );

      expect(container.firstChild).toHaveStyle(`
        background-color: ${expectedBackground};
      `);
    }
  );
});

describe('CountNumberBadge', () => {
  it.each`
    intent       | expectedColor
    ${'success'} | ${theme.colors.badge.success}
    ${'primary'} | ${theme.colors.badge.primary}
    ${'warning'} | ${theme.colors.badge.warning}
    ${'danger'}  | ${theme.colors.badge.danger}
    ${'error'}   | ${theme.colors.badge.error}
  `(
    'has $expectedColor color when intent is $intent',
    ({ intent, expectedColor }) => {
      const { container } = renderWithTheme(
        <CountNumberBadge themeIntent={intent} themePadding="narrowContent" />
      );

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

  it('has narrowContent style', () => {
    const { container } = renderWithTheme(
      <CountNumberBadge themeIntent="success" themePadding="narrowContent" />
    );

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

  it('has wideContent style', () => {
    const { container } = renderWithTheme(
      <CountNumberBadge themeIntent="success" themePadding="wideContent" />
    );

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