import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteTrigger } from '@angular/material';
import { QueryService } from '../../../forms/service/query.service';

@Component({
    selector: 'rss-auto-suggest',
    templateUrl: './auto-suggest.component.html',
    styleUrls: ['./auto-suggest.component.scss'],
})

export class AutoSuggestComponent {
    @Input('autosuggestConfig') autosuggestConfig: any;

    @ViewChild(MatAutocompleteTrigger) mdAutoCompleteTrigger: MatAutocompleteTrigger;
    @Output() alreadyExists: EventEmitter<boolean> = new EventEmitter<boolean>();
    @Output() addData: EventEmitter<any> = new EventEmitter<any>();

    public AutoSearch = new FormControl();
    public httpSubscription: any;
    public showLoading: boolean = true;
    public showAutosuggestList: boolean = true;
    public listAutosuggest: any;

    constructor(private queryService: QueryService) {
        this.AutoSearch = new FormControl();
        this.AutoSearch.setValue("");
    }

    ngOnInit() {
        this.getAutosuggest();
    }


    public getAutosuggest() {
        this.showHideAutosuggestLoading();
        this.AutoSearch.valueChanges.debounceTime(300).subscribe(val => {
            if (val.length > 1) {
                this.httpSubscription = this.queryService.query(this.autosuggestConfig.url + this.AutoSearch.value).subscribe(res => {
                    this.listAutosuggest = res;
                    this.showLoading = false;
                    this.showAutosuggestList = true;
                    this.mdAutoCompleteTrigger.closePanel();
                    this.mdAutoCompleteTrigger.openPanel();
                });
            }
        });
    }

    public addItem(data: any) {
        this.mdAutoCompleteTrigger.writeValue("");
        this.listAutosuggest = [];
        this.mdAutoCompleteTrigger.closePanel();
        this.AutoSearch.setValue("");
        this.showAutosuggestList = false;
        this.addData.emit(data)
    }

    public showHideAutosuggestLoading() {
        this.AutoSearch.valueChanges.subscribe(val => {
            if (this.httpSubscription)
                this.httpSubscription.unsubscribe();
            if (val.length > 0)
                this.alreadyExists.emit(true);
            if (val.length > 1) {
                this.listAutosuggest = null;
                setTimeout(() => { if (!this.listAutosuggest) this.showLoading = true }, 1000);//Delay loading for one second
                this.showAutosuggestList = false;
            } else {
                this.showAutosuggestList = false;
                this.showLoading = false;
            }
        });
    }

    public highlightSearchText(data: any) {
        let displayText = eval(this.autosuggestConfig.text);
        let SearchTextArr = [], displayTextArr = [];
        let result = "";
        if (this.AutoSearch.value.trim().indexOf(" ") > 0) {
            SearchTextArr = this.AutoSearch.value.split(' ');
            displayTextArr = displayText.split(' ');
            displayTextArr.forEach(building => {
                for (var i = 0; i < SearchTextArr.length; i++) {
                    let res = this.replaceHighlightText(SearchTextArr[i], building);
                    if (res == building && i == SearchTextArr.length - 1)
                        result += building + " ";
                    else if (this.containsHTML(res)) {
                        result += res + " ";
                        break;
                    }
                }
            });
        }
        else {
            result = this.replaceHighlightText(this.AutoSearch.value, displayText);
        }
        return result;
    }

    private containsHTML(html: string) {
        var textMatcher = new RegExp(/<span/g);
        return html.match(textMatcher) ? true : false;
    }

    private replaceHighlightText(searchKey: string, srcText: string) {
        if (searchKey.trim()) {
            var textMatcher = new RegExp(searchKey, 'ig');
            var result = srcText.replace(textMatcher, function (match) {
                if (match.length > 0) {
                    let tag = document.createElement('span');
                    tag.innerHTML = match;
                    tag.className = "highlight-text-auto"
                    return tag.outerHTML;
                }
                else {
                    return srcText;
                }
            });
            return result;
        }
        else
            return srcText;
    }

}