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

import Progress, { ProgressProps } from '..';

describe('rendering', () => {
  describe('progress value < 100', () => {
    it('renders progress value', () => {
      const progress50 = renderWithTheme(<Progress value={50} />);
      expect(progress50.getByText('50%')).toBeInTheDocument();

      const progress0 = renderWithTheme(<Progress value={0} />);
      expect(progress0.getByText('0%')).toBeInTheDocument();

      const progress99 = renderWithTheme(<Progress value={99} />);
      expect(progress99.getByText('99%')).toBeInTheDocument();
    });
  });

  describe('progress value = 100', () => {
    it('renders check icon', () => {
      const progress100 = renderWithTheme(<Progress value={100} />);
      expect(progress100.queryByText('100%')).not.toBeInTheDocument();
      expect(progress100.container.querySelector('i')).toHaveClass(
        'hero-icon-circle-ok'
      );
    });
  });

  describe('withInfo is disabled', () => {
    it('does NOT render progress value', () => {
      const progress50 = renderWithTheme(
        <Progress value={50} withInfo={false} />
      );
      expect(progress50.queryByText('50%')).not.toBeInTheDocument();
    });
  });

  describe('progress value is invalid', () => {
    jest.spyOn(console, 'error').mockImplementation(() => '');

    it('throws exception when value is < 0', () => {
      expect(() => renderWithTheme(<Progress value={-0.0001} />)).toThrow(
        '[Hero-design] [Progress] value:-0.0001 is not in range [0, 100]'
      );
    });

    it('throws exception when value is > 100', () => {
      expect(() => renderWithTheme(<Progress value={100.0001} />)).toThrow(
        '[Hero-design] [Progress] value:100.0001 is not in range [0, 100]'
      );
    });
  });
});

describe('Progress Info', () => {
  it.each`
    status         | value  | expectedIconClass            | variant
    ${'active'}    | ${100} | ${'hero-icon-circle-ok'}     | ${'bar'}
    ${'active'}    | ${25}  | ${null}                      | ${'bar'}
    ${'exception'} | ${25}  | ${'hero-icon-circle-cancel'} | ${'bar'}
    ${'custom'}    | ${25}  | ${null}                      | ${'bar'}
    ${'active'}    | ${100} | ${'hero-icon-checkmark'}     | ${'circle'}
    ${'active'}    | ${25}  | ${null}                      | ${'circle'}
    ${'exception'} | ${25}  | ${'hero-icon-cancel'}        | ${'circle'}
    ${'custom'}    | ${25}  | ${null}                      | ${'circle'}
  `(
    'shows correct icon/value info when status is $status, value is $value, variant is $variant',
    ({
      status,
      value,
      expectedIconClass,
      variant,
    }: ProgressProps & { expectedIconClass: string | null }) => {
      const { container, getByText } = renderWithTheme(
        <Progress value={value} status={status} variant={variant} />
      );

      if (expectedIconClass !== null) {
        expect(container.querySelector('i')).toHaveClass(expectedIconClass);
      } else {
        expect(getByText(`${value}%`)).toBeInTheDocument();
      }
    }
  );
});