import { Component, OnInit, Input, ElementRef, ViewChild, ViewEncapsulation, OnDestroy, Injector } from '@angular/core';
import { Subscription } from 'rxjs';
import { ComboFacadeService } from './core/combo-facade.service';
import { ComboService } from './combo.service';
import { COMBO_FACADE_SERVICE } from './core/combo-types';

@Component({
    selector: 'combo-panel',
    template: `
    <div #comboPanelEl class="farris-combo-panel" [ngStyle]="getStyles()">

        <ng-content></ng-content>

    </div>
    `,
    styleUrls: ['./combo.css'],
    encapsulation: ViewEncapsulation.None
})

export class ComboPanelComponent implements OnInit, OnDestroy {
    isOpen = false;
    @Input() left: number;
    @Input() top: number;
    @Input() width = 200;
    @Input() height = 200;

    @ViewChild('comboPanelEl') comboPanelEl: ElementRef;
    private _toggleClickSub: Subscription;
    private cmb: ComboFacadeService;
    constructor(private state: ComboService, public el: ElementRef,  private injector: Injector) {
        this.cmb = this.injector.get(COMBO_FACADE_SERVICE) as ComboFacadeService;
        this._toggleClickSub  = this.state.toggleClick.subscribe((val) => {
            if (!val) {
                this.cmb.hidePanel();
            }
        });
    }

    ngOnInit() {
    }

    ngOnDestroy() {
        this._toggleClickSub.unsubscribe();
    }

    getStyles() {
        return {
            left: this.left + 'px',
            top: this.top + 'px',
            width: this.width + 'px',
            height: this.height + 'px'
        };
    }

    contains(event: any) {
        return this.el.nativeElement.contains(event.target);
    }

}