import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ProductEdit } from './product-edit';
import { ActivatedRoute } from '@angular/router';
import { Product } from '../../models/Product';
import { BehaviorSubject } from 'rxjs';
import { ImageStorage } from '../../services/image-storage';
import { ProductSettings } from '../../services/product-settings';
import { provideTranslateService } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';

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

  let activatedRoute: Partial<ActivatedRoute>;
  let imageStorage: Partial<ImageStorage>;
  let productSettings: Partial<ProductSettings>;

  const dataSubject = new BehaviorSubject({ product: new Product('mock', 'mock', 'mock.jpg', 1) });
  
  beforeEach(async () => {
    activatedRoute = {
      data: dataSubject,
    };
    imageStorage = {
      getImage: vi.fn().mockResolvedValue(new Blob([], { type: 'image/png' })),
    };
    productSettings = {
      update: vi.fn(),
    };

    await TestBed.configureTestingModule({
      imports: [ProductEdit],
      providers: [
        { provide: ActivatedRoute, useValue: activatedRoute },
        { provide: ImageStorage, useValue: imageStorage },
        { provide: ProductSettings, useValue: productSettings },
        provideTranslateService(),
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(ProductEdit);
    component = fixture.componentInstance;
    await fixture.whenStable();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should fetch image from imageStorage', () => {
    expect(imageStorage.getImage).toHaveBeenCalledTimes(1);
    
  });

  //TODO: there is some sync issue by using a getter for the disabled state
  it('should not call update on update btn click if form is unchanged', () => {
    expect(component.disabled).toBe(true);
  });

  it('should call productSettings update on product update', async () => {
    //User updates the product name
    component.form.controls.name.patchValue('updated name mock');
    component.form.controls.name.markAsDirty();
    await fixture.whenStable();
    expect(component.disabled).toBe(false);
    const updateBtn = fixture.debugElement.query(By.css('app-action-btn'));
    //this would trigger the update anyway thats why we check for the button not to be disabled
    updateBtn.triggerEventHandler('click');
    expect(productSettings.update).toHaveBeenCalledTimes(1);
  });

});