import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RemissionListCardStartedComponent } from './remission-list-card-started.component';
import { By } from '@angular/platform-browser';
import { remissionProducts } from '../../mocks';
import { RemissionClientModule } from '../../remission-client.module';
import { RemissionService } from '@isa/remission';
import { NgxsModule } from '@ngxs/store';
import { HttpClientTestingModule } from '@angular/common/http/testing';

describe('RemissionListCardStartedComponent', () => {
  let component: RemissionListCardStartedComponent;
  let fixture: ComponentFixture<RemissionListCardStartedComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RemissionClientModule, NgxsModule.forRoot(), HttpClientTestingModule],
      providers: [RemissionService],
    }).compileComponents();

    fixture = TestBed.createComponent(RemissionListCardStartedComponent);
    component = fixture.componentInstance;
  }));

  it('should show Restmenge if it is a residual product ', () => {
    const expectedColorCode = '#c9962d';
    component.product = {
      ...remissionProducts[0],
      isResidual: true,
    };

    fixture.detectChanges();

    const remainingQuantity = fixture.debugElement.query(By.css('.restmenge'));
    const nativeElement: HTMLElement = remainingQuantity.nativeElement;

    expect(remainingQuantity).toBeTruthy();
    expect(rgbToHex(window.getComputedStyle(nativeElement).getPropertyValue('color'))).toEqual(expectedColorCode);
  });

  it('should not show Restmenge if it is not a residual product ', () => {
    component.product = {
      ...remissionProducts[0],
      isResidual: false,
    };

    fixture.detectChanges();

    const remainingQuantity = fixture.debugElement.query(By.css('.restmenge'));

    expect(remainingQuantity).toBeFalsy();
  });
});

function rgbToHex(rgb) {
  const sep = rgb.indexOf(',') > -1 ? ',' : ' ';
  rgb = rgb.substr(4).split(')')[0].split(sep);

  let r = (+rgb[0]).toString(16),
    g = (+rgb[1]).toString(16),
    b = (+rgb[2]).toString(16);

  if (r.length === 1) {
    r = '0' + r;
  }
  if (g.length === 1) {
    g = '0' + g;
  }
  if (b.length === 1) {
    b = '0' + b;
  }

  return '#' + r + g + b;
}
