import { Injectable, ComponentFactoryResolver, Injector, ApplicationRef, ComponentRef, ViewContainerRef, ElementRef } from '@angular/core';
import { FilterPanelComponent } from './filter-panel.component';
import { FilterPanelOption } from './filter-panel.interface';

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

    filterPanelContainer: ComponentRef<FilterPanelComponent>;

    constructor(
        private cfr: ComponentFactoryResolver,
        private injector: Injector,
        private appRef: ApplicationRef,
    ) { }

    showPanel(option: FilterPanelOption) {
        this.hidePanel();
        const containerFac = this.cfr.resolveComponentFactory(FilterPanelComponent);
        this.filterPanelContainer = containerFac.create(this.injector);
        this.appRef.attachView(this.filterPanelContainer.hostView);

        document.querySelector('body').appendChild(this.filterPanelContainer.location.nativeElement);

        this.filterPanelContainer.instance.option = option;
        // this.filterPanelContainer.instance.clear.subscribe((event)=>{
        //   this.clear();
        // });
        this.filterPanelContainer.changeDetectorRef.markForCheck();
        this.filterPanelContainer.changeDetectorRef.detectChanges();
        return this.filterPanelContainer.instance;
    }

    public hidePanel() {
        if (this.filterPanelContainer) {
            this.filterPanelContainer.instance.hide = true;
            this.filterPanelContainer.destroy();
            this.filterPanelContainer = undefined;
        }
    }
}