// Angular //
import { OnInit, EventEmitter, Output, HostListener, ElementRef, Component, Input } from
    '@angular/core';

// Other //
import * as statics from '@fb/statics';

/*
* Directive som skapar flytande div med dynamiskt innehåll
*/
// Todo importera styles enligt wiki /vile
@Component({
    selector: 'fb-popover',
    templateUrl: './fb-popover.component.html',
    styleUrls: [/*'./fb-popover.component.less'*/]
})
export class FbPopoverComponent implements OnInit {
    // Inputs
    @Input()
    title: string;
    @Input()
    text: string;
    @Input()
    subText: string;
    @Input()
    anchor: any;
    @Input()
    ledigtNyckelNummer: boolean;
    @Input()
    danger: boolean;
    @Input()
    placement: string;
    @Input()
    show: boolean;

    // Outputs
    @Output()
    confirm: EventEmitter<any> = new EventEmitter<any>();
    @Output()
    deny: EventEmitter<any> = new EventEmitter<any>();
    @Output()
    onDismiss: EventEmitter<any> = new EventEmitter<any>();

    private hostElm: Node;
    private selfElm: Node;

    constructor(private readonly elementRef: ElementRef) { }

    ngOnInit(): void {
        this.selfElm = this.elementRef.nativeElement;
        this.hostElm = this.selfElm.parentNode;
    }

    yes(): void {
        this.show = false;
        this.confirm.emit();
        this.onDismiss.emit();
    }

    no(): void {
        this.show = false;
        this.deny.emit();
        this.onDismiss.emit();
    }

    @HostListener('window:click', ['$event'])
    dismiss(event: any): void {
        if (!this.show) {
            return;
        }

        statics.clickOutside(event, this.selfElm, this.hostElm, () => {
            this.onDismiss.emit();
        });
    }
}