import { LocaleService } from '@farris/ui-locale';
import { CommonUtils } from '@farris/ui-common';
/*
 * @Author: Lucas.Huang（疯狂秀才）
 * @Date: 2018-10-13 11:11:50
 * @Last Modified by:   Lucas.Huang（疯狂秀才）
 * @Last Modified time: 2018-10-13 11:11:50
 */
import { ElementRef, Component, OnInit, Input, Injector, HostBinding, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';
import { DialogButton } from '@farris/ui-modal';

@Component({
    selector: 'farris-messager',
    templateUrl: './messager.component.html'
})
export class MessagerComponent implements OnInit, AfterViewInit {
    @Input() type: string;
    @Input() showFontSize = false;

    private _message = '';
    get message() {
        return this._message;
    }

    @Input() set message(str) {
        this._message = (str === undefined || str === null) ? '' : '' + str;
        if (this.type === 'prompt' && this.utils) {
            this._message = this.utils.unescapeHtml(this._message);
        }
    }

    @Input() msg = '';
    utils: CommonUtils;
    localeService: LocaleService;
    render: Renderer2;
    constructor(private injector: Injector) {
        this.utils = this.injector.get(CommonUtils);
        this.localeService = this.injector.get(LocaleService);
        this.render = this.injector.get(Renderer2);
    }

    @HostBinding('class') cls = 'farris-messager';

    @Input() okText = '';
    @Input() cancelText = '';
    @Input() showOkButton = true;
    @Input() showCancelButton = true;

    @Input() okHandle: () => {};
    @Input() cancelHandle: () => {};


    @Input() enableWordCount = false;
    @Input() countType = 'length';
    @Input() maxLength: number;

    @Input() exception = null;
    @Input() showLines = 4;

    @ViewChild('promptText') promptText: ElementRef;
    @ViewChild('fontSizeEl') fontSizeEl: ElementRef;
    @ViewChild('wordCount') wordCountEl: ElementRef;
    @ViewChild('excepMsg') excepMsgEl: ElementRef;
    @ViewChild('allexcep') allexcepEl: ElementRef;
    @ViewChild('miniNotify') miniNotifyEl: ElementRef;

    @Input() fontSize = '18';

    @Input() inputType = 'textarea';
    @Input() placeholder = '';

    @Input() buttons: DialogButton[] = [];

    get fontsizeName() {
        return this.localeService.getValue('messager.prompt.fontSize.name');
    }
    get fontSmall() {
        return this.localeService.getValue('messager.prompt.fontSize.small');
    }
    get fontMiddle() {
        return this.localeService.getValue('messager.prompt.fontSize.middle');
    }
    get fontBig() {
        return this.localeService.getValue('messager.prompt.fontSize.big');
    }
    get fontLarge() {
        return this.localeService.getValue('messager.prompt.fontSize.large');
    }
    get fontHuge() {
        return this.localeService.getValue('messager.prompt.fontSize.huge');
    }

    get expandText() {
        return this.localeService.getValue('messager.exception.expand');
    }

    get collapseText() {
        return this.localeService.getValue('messager.exception.collapse');
    }

    get happend() {
        return this.localeService.getValue('messager.exception.happend');
    }

    get detail() {
        return this.localeService.getValue('messager.exception.detail');
    }

    get exceptionMsgMaxHeight () {
        return window.innerHeight -10 -10 - 100 -100 -16;
    }


    expand = false;
    needShowExpand = false;

    wordsTotal = '';
    wrodsTotalTips = '';

    ngOnInit() {
        setTimeout(() => {
            if (this.enableWordCount && this.promptText) {
                this.onTextChange(null);
            }
        });

        this.type = this.type === 'exception' ? 'error' : this.type;
    }

    get icon() {
        return 'f-icon-' + (this.type === 'exception' ? 'error' : this.type);
    }

    ngAfterViewInit(): void {
        setTimeout(() => {
            if (this.exception && this.exception['message']) {
                const realWidth = this.excepMsgEl.nativeElement.getBoundingClientRect().width.toFixed(2) + 'px';
                this.render.setStyle(this.allexcepEl.nativeElement, 'width', realWidth);
                this.needShowExpand = this.allexcepEl.nativeElement.offsetHeight > this.excepMsgEl.nativeElement.offsetHeight;
            } else {
                this.needShowExpand = false;
            }
        }, 10);
    }

    onFontSizeChange(val, textAreaEl) {
        // this.promptText.nativeElement
        // textAreaEl.nativeElement.style['font-size'] = val;
    }

    private getWordsTotal() {
        const c = this.countType === 'length' ? this.promptText.nativeElement.value.length
                                            : this.maxLength - this.promptText.nativeElement.value.length;
        return c;
    }

    onTextChange($event) {
        this.wordsTotal = this.getWordsTotal();
        this.wrodsTotalTips = this.localeService.getValue('messager.prompt.tips.' + this.countType).replace('{0}', this.wordsTotal);
    }

    expandMsg(t: boolean, $event: MouseEvent) {
        $event.stopPropagation();
        if (t) {
            this.render.setStyle(this.excepMsgEl.nativeElement, 'overflow', 'auto');
            this.render.removeStyle(this.excepMsgEl.nativeElement, '-webkit-line-clamp');
        } else {
            this.render.setStyle(this.excepMsgEl.nativeElement, 'overflow', 'hidden');
            this.render.setStyle(this.excepMsgEl.nativeElement, '-webkit-line-clamp', this.showLines);
        }

        this.expand = t;
    }


    onCopyClick($event) {
        $event.stopPropagation();
        if (this.exception && this.exception.copyButton) {
            this.exception.copyButton.onClick({ event: $event, cmpRef: this });
        }
    }

    showMiniNotify(msg, timeout = 700) {
        if (this.miniNotifyEl) {
            this.miniNotifyEl.nativeElement.innerText = msg;
            this.render.setStyle(this.miniNotifyEl.nativeElement, 'display', '');
            this.render.setStyle(this.miniNotifyEl.nativeElement, 'opacity', 0.8);

            setTimeout(() => {
                this.render.setStyle(this.miniNotifyEl.nativeElement, 'opacity', 0);
                this.render.setStyle(this.miniNotifyEl.nativeElement, 'display', 'none');
            }, timeout);
        }
    }
}