import { Injectable, ComponentRef, ApplicationRef, Injector, ComponentFactoryResolver } from '@angular/core';
import { VerifyDetailComponent } from './verify-detail.component';
import { VerifyDetailOptions } from './verify.options';

@Injectable({
  providedIn: 'root'
})
export class VerifyDetailService {

  verifyContainer: ComponentRef<VerifyDetailComponent>;
  constructor(
    private cfr: ComponentFactoryResolver,
    private injector: Injector, 
    private appRef: ApplicationRef
    ) {}

  createVerify(option:VerifyDetailOptions){
      this.clear();
    //if (!this.verifyContainer) {
        const containerFac = this.cfr.resolveComponentFactory(VerifyDetailComponent);
        const cmpRef = containerFac.create(this.injector);
        this.appRef.attachView(cmpRef.hostView);
        let maxHeight:number;
        if(option.parent){
          // option.parent.nativeElement.style.position = 'relative';
          maxHeight = option.parent.nativeElement.offsetHeight - 60;
          option.parent.nativeElement.appendChild(cmpRef.location.nativeElement);
        }
        else{
          maxHeight = document.documentElement.clientHeight - 60;
          document.querySelector('body').appendChild(cmpRef.location.nativeElement);
        }
        this.verifyContainer = cmpRef;
        this.verifyContainer.instance.maxHeight = maxHeight;
        this.verifyContainer.instance.showList = option.showList;
        this.verifyContainer.instance.showType = option.showType;
        this.verifyContainer.instance.tabList = option.verifyType;
        this.verifyContainer.instance.validatorList = option.verifyList;
        if(option.hasOwnProperty('verifyResultTipsTmpl')&&option['verifyResultTipsTmpl']){
          this.verifyContainer.instance.resultTipsTmpl=option.verifyResultTipsTmpl;
        }
        // this.verifyContainer.instance.listshowChange.subscribe((event)=>{
        //   console.log(event);
        // });
        // this.verifyContainer.instance.validatorClick.subscribe((event)=>{
        //   console.log(event);
        // });
        return this.verifyContainer.instance;
    //}
  }

  public clear() {
      if (this.verifyContainer) {
        const el = this.verifyContainer.location.nativeElement;
        if (el.parentNode) {
            el.parentNode.removeChild(el);
        }
        this.verifyContainer.destroy();
        this.verifyContainer = undefined;
      }
  }

}