import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
import { render, cleanup, screen, mockMatchMedia } from '../test-utils';

import StatusIcon from '.';

mockMatchMedia();

describe('StatusIcon', () => {
  const renderStatusIcon = (props?: {
    sentiment?: Sentiment;
    size?: SizeLarge | SizeMedium | SizeSmall;
  }) => {
    return render(
      <StatusIcon
        sentiment={props?.sentiment || Sentiment.NEUTRAL}
        size={props?.size || Size.MEDIUM}
      />,
    );
  };

  afterEach(cleanup);

  it('renders the status icon without any props', () => {
    renderStatusIcon();

    expect(screen.getByTestId('status-icon')).toHaveClass('neutral');
    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle');
    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-md');
  });

  it.each([
    [Size.SMALL as const, 'status-circle-sm'],
    [Size.MEDIUM as const, 'status-circle-md'],
    [Size.LARGE as const, 'status-circle-lg'],
  ])(
    "if prop 'size' equals '%s' is passed, renders the status icon with class '%s'",
    (size, expectedClass) => {
      renderStatusIcon({ size });

      expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
      cleanup();
    },
  );

  it.each([
    [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
    [Sentiment.NEUTRAL, Sentiment.NEUTRAL],
    [Sentiment.PENDING, Sentiment.PENDING],
    [Sentiment.POSITIVE, Sentiment.POSITIVE],
    [Sentiment.WARNING, Sentiment.WARNING],
  ])(
    "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
    (sentiment, expectedClass) => {
      renderStatusIcon({ sentiment });

      expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
      cleanup();
    },
  );

  it("'warning' and 'pending' sentiments generate 'dark' colored icons", () => {
    renderStatusIcon({ sentiment: Sentiment.WARNING });
    expect(screen.getByTestId('alert-icon')).toHaveClass('dark');
    cleanup();

    renderStatusIcon({ sentiment: Sentiment.PENDING });
    expect(screen.getByTestId('clock-borderless-icon')).toHaveClass('dark');
  });

  it("'positive', 'negative', and 'neutral' sentiments generate 'light' colored icons", () => {
    renderStatusIcon({ sentiment: Sentiment.POSITIVE });
    expect(screen.getByTestId('check-icon')).toHaveClass('light');
    cleanup();

    renderStatusIcon({ sentiment: Sentiment.NEGATIVE });
    expect(screen.getByTestId('cross-icon')).toHaveClass('light');
    cleanup();

    renderStatusIcon();
    expect(screen.getByTestId('info-icon')).toHaveClass('light');
  });
});
