/// <reference path="../../../typings/browser/ambient/jquery/index.d.ts" />
import { HostListener, EventEmitter, Component, Input, Output, AfterViewChecked, OnInit } from "@angular/core";
import { Reference } from '../../libs/Reference';
import { OpenData, CardItem } from "../../pages/search/search";
import { WordLookupResult, WordService } from '../../services/word-service';

@Component({
    selector: "words",
    templateUrl: "words.html",
    providers: [WordService]
})
export class Words implements AfterViewChecked, OnInit
{
    @Output()
    onClose = new EventEmitter<CardItem>();

    @Output()
    onItemClicked = new EventEmitter<OpenData>();

    @Input()
    cardItem: CardItem;

    $: any;

    data: WordLookupResult;

    constructor(private wordService: WordService)
    {
    }

    @HostListener('window:resize', ['$event'])
    onResize(evt)
    {
        $("words ion-scroll").each((i, el) =>
        {
            let wr = $(el).find(".scroll-content .scroll-zoom-wrapper")[0];
            let len = $(el).find(".scroll-zoom-wrapper a").length;

            if (wr.scrollWidth < 500) // 1 col
            {
                if (len < 6) // 5 rows
                    $(el).css("height", len * 44.4 + 25);
                else
                    $(el).css("height", 250);
            }
            else if (wr.scrollWidth < 699) // 2 col
            {
                if (len < 13) // 6 rows
                    $(el).css("height", Math.ceil(len / 2) * 44.4 + 25);
                else
                    $(el).css("height", 300);
            }
            else if (wr.scrollWidth < 799) // 3 col
            {
                if (len < 22) // 7 rows
                    $(el).css("height", Math.ceil(len / 3) * 44.4 + 25);
                else
                    $(el).css("height", 350);
            }
            else if (wr.scrollWidth < 899) // 4 col
            {
                if (len < 29) // 7 rows
                    $(el).css("height", Math.ceil(len / 4) * 44.4 + 25);
                else
                    $(el).css("height", 350);
            }
            else if (wr.scrollWidth < 1199) // 5 col
            {
                if (len < 41) // 8 rows
                    $(el).css("height", Math.ceil(len / 5) * 44.4 + 25);
                else
                    $(el).css("height", 400);
            }
            else // 6 col
            {
                if (len < 49) // 8 rows
                    $(el).css("height", Math.ceil(len / 6) * 44.4 + 25);
                else
                    $(el).css("height", 400);
            }
        });
    }
    public ngAfterViewChecked(): void
    {
        this.onResize(null);
    }

    ngOnInit(): void
    {
        this.wordService.getResultAsPromise(this.cardItem.qry).then(data => this.data = data);
    }

    close()
    {
        this.onClose.emit(this.cardItem);
    }

    makePassage(p: string)
    {
        return Reference.bookName(parseInt(p.split(":")[0])) + ' ' + p.split(":")[1] + ":" + p.split(":")[2];
    }

    openPassage(p: string)
    {
        let ref = this.makePassage(p);
        this.onItemClicked.emit({ card: this.cardItem, qry: ref });
    }
}