import { Injectable, ComponentFactoryResolver, Injector, ApplicationRef, ComponentRef } from '@angular/core';
import { PageWalkerOptions } from './page-walker.options';
import { PagewalkerComponent } from './page-walker.component';

@Injectable()
export class PagewalkerService {

  walkerDetailContainer: ComponentRef<PagewalkerComponent>;
  constructor(private cfr: ComponentFactoryResolver,
    private injector: Injector,
    private appRef: ApplicationRef) {
  } 
  createDetail(option: PageWalkerOptions) {
    this.clear();
    const containerFac = this.cfr.resolveComponentFactory(PagewalkerComponent);
    const cmpRef = containerFac.create(this.injector);
    this.appRef.attachView(cmpRef.hostView);
    const canvas = document.createElement("canvas");
    canvas.style.position = "fixed";
    canvas.style.left = "0";
    canvas.style.top = "0";
    canvas.style.zIndex = '22222';
    canvas.id = 'pageWalkerCanvas';
    const context = canvas.getContext('2d');
    canvas.width = document.body.offsetWidth;
    canvas.height = window.innerHeight;
    context.fillStyle = "rgba(0,0,0,0.16)";
    context.fillRect(0, 0, document.body.offsetWidth, window.innerHeight);
    context.clearRect(option.coord[0], option.coord[1], option.size[0], option.size[1]);
    document.querySelector('body').appendChild(cmpRef.location.nativeElement);
    document.querySelector('body').appendChild(canvas);
    this.walkerDetailContainer = cmpRef;
    this.walkerDetailContainer.instance.walkId = option.walkId;
    this.walkerDetailContainer.instance.title = option.title;
    this.walkerDetailContainer.instance.subtitle = option.subtitle;
    this.walkerDetailContainer.instance.coord = option.coord;
    this.walkerDetailContainer.instance.size = option.size;
    this.walkerDetailContainer.instance.pagelength = option.pageLength;
    this.walkerDetailContainer.instance.currentIndex = option.currentIndex;
    this.walkerDetailContainer.instance.imgSrc = option.imgSrc;
    this.walkerDetailContainer.instance.position = option.hasOwnProperty('position') ? option.position : 'right';
    return this.walkerDetailContainer.instance;
  }
  public clear() {
    if (document.getElementById('pageWalkerCanvas')) {
      document.getElementById('pageWalkerCanvas').remove();
    }
    if (this.walkerDetailContainer) {
      const el = this.walkerDetailContainer.location.nativeElement;
      if (el.parentNode) {
        el.parentNode.removeChild(el);
      }
      this.walkerDetailContainer.destroy();
      this.walkerDetailContainer = undefined;
    }
  }
}