// Angular //
import { OnInit, Component, Input, ViewChild, ElementRef, HostListener } from '@angular/core';
import { downgradeComponent } from '@angular/upgrade/static';

// Lib imports //
import * as _ from 'underscore';

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

declare const angular: angular.IAngularStatic;

/**
 * Visar en checkbox
 *
 * Syntax:
 * <fb-info-tooltip *parametrar></fb-info-tooltip>
 *
 * @param headline rubrik för tooltip-rutan
 * @param label Label att visa. Skrivs ut bredvid info-i
 * @param noLabel Sätt till true för att dölja label
 * @param arrowPosition Arrow-position för tooltip-rutan
 * @param text Text som visas i tooltip-rutan
 */
@Component({
    selector: 'fb-info-tooltip',
    templateUrl: './fb-info-tooltip.component.html'
})
export class FbInfoTooltipComponent implements OnInit {
    @Input()
    headline: string;
    @Input()
    label: string;
    @Input()
    text: string;
    @Input()
    noLabel: boolean;
    @Input()
    arrowPosition: string;


    isSticky: boolean = true;
    showHeadline: boolean = true;
    isTooltipVisible: boolean = false;
    timer: any;
    showTop: boolean = false;
    showBottom: boolean = false;
    showArrowRight: boolean = false;


    @ViewChild('content')
    content: ElementRef;

    private selfElm: Node;
    private hostElm: Node;
    private contentElm: any;

    constructor(private readonly elementRef: ElementRef) {
    }

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

        if (_.isUndefined(this.label) && _.isUndefined(this.noLabel) && !_.isUndefined(this.headline)) {
            this.label = this.headline;
        }

        if (_.isUndefined(this.headline)) {
            this.showHeadline = false;
        }

        if (this.arrowPosition === 'right') {
            this.showArrowRight = true;
        }
    }

    updateShowingAboveOrBelow(): void {
        if (this.isTooltipVisible) {
            setTimeout(() => {
                let elementAtOffsetPosistion: Element;

                elementAtOffsetPosistion = document.elementFromPoint(this.contentElm.getBoundingClientRect().left + 10, this.contentElm.getBoundingClientRect().top + 10);
                if (this.contentElm === elementAtOffsetPosistion) {
                    this.showTop = true;
                } else {
                    this.showBottom = true;
                }
            });
        } else {
            this.showTop = false;
            this.showBottom = false;
        }
    }

    @HostListener('window:click', ['$event'])
    clickOutside(event): void {
        if (!this.isTooltipVisible) {
            return;
        }
        statics.clickOutside(event, this.selfElm, this.hostElm, () => {
            this.closeTooltip();
        });
    }

    closeTooltip(): void {
        this.isTooltipVisible = false;
        this.isSticky = true;
        this.updateShowingAboveOrBelow();
    }

    showDelayedTooltip(): void {
        this.timer = setTimeout(() => {
            if (!this.isTooltipVisible) {
                this.isSticky = false;
            }

            this.isTooltipVisible = true;
            this.updateShowingAboveOrBelow();
        }, 501);
    }

    toggleTooltip(): void {
        clearTimeout(this.timer);

        if (this.isSticky) {
            this.isTooltipVisible = !this.isTooltipVisible;
            this.updateShowingAboveOrBelow();
        }

        this.isSticky = true;
    }

    hideDelayedTooltip(): void {
        clearTimeout(this.timer);

        if (!this.isSticky) {
            this.closeTooltip();
        }
    }

    setTooltipSticky(event: MouseEvent): void {
        event.stopPropagation();
        this.isSticky = true;
    }
}

// Angular downgrade //
angular.module('fasit')
    .directive('fbInfoTooltip',
    downgradeComponent({
        component: FbInfoTooltipComponent,
        inputs: ['headline', 'label', 'text', 'noLabel', 'arrowPosition'],
        outputs: []
    }) as angular.IDirectiveFactory);