import {
    Component,
    OnInit,
    OnChanges,
    Input,
    Output,
    EventEmitter,
    ViewChild,
    ElementRef,
    SimpleChanges,
    NgZone,
    TemplateRef
} from '@angular/core';
import { NotifyData,NotifyButton } from './notifiy.options';

@Component({
    selector: 'farris-notify',
    template: `
        <div #notifyDiv class="toast" [ngClass]="inCls">
            <button *ngIf="toast.showClose" class="toast-close f-btn-icon f-bare" (click)="closeToast($event)">
                <span class="f-icon modal_close"></span>
            </button>
            <section class="modal-tips"  *ngIf="toast.title || toast.msg">
                <div class="float-left modal-tips-iconwrap">
                    <span class="f-icon" [ngClass]=" getPurType()"></span>
                </div>
                <div class="modal-tips-content">
                    <ng-container *ngIf="toast.title&&toast.msg">
                        <h5 class="toast-title modal-tips-title" [innerHTML]="toast.title | safe: 'html'"></h5>
                        <p class="toast-msg" [innerHtml]="toast.msg | safe:'html'"></p>
                        <div class="after-toast-msg text-right" *ngIf="toast.buttons">
                            <ng-container [ngTemplateOutlet]="useButtonsTemplate() ? toast.buttons : defaultButtonRef"></ng-container>
                        </div>
                    </ng-container>

                    <ng-container *ngIf="!toast.title&&toast.msg">
                        <ng-container *ngIf="toast.buttons" >
                            <div  class="toast-title-btns-wrapper d-flex" >
                                <h5 class="toast-title modal-tips-title only-toast-msg" [innerHtml]="toast.msg | safe:'html'"></h5>
                                <div class="after-toast-title text-right ml-auto">
                                     <ng-container [ngTemplateOutlet]="useButtonsTemplate() ? toast.buttons : defaultButtonRef"></ng-container>
                                 </div>
                            </div>
                        </ng-container>
                        <ng-container *ngIf="!toast.buttons" >
                            <h5 class="toast-title modal-tips-title only-toast-msg" [innerHtml]="toast.msg | safe:'html'"></h5>
                        </ng-container>
                    </ng-container>
                </div>
            </section>
        </div>

        <ng-template #defaultButtonRef>
            <span class="'f-preten-link '+btn.cls?btn.cls:''"  *ngFor="let btn of toast.buttons; last as isLast"
                (click)="clickHandler($event,btn) ">
                 {{ btn.text }}
            </span>
        </ng-template>
    `,
    styles: [
        `
            .toast-title-beforeshow{
                opacity:0;
            }
            @-webkit-keyframes farrisMoveUpIn {
                0% {
                    transform: translateY(-100%);
                    transform-origin: 0 0;
                    opacity: 0
                }
            
                100% {
                    transform: translateY(0);
                    transform-origin: 0 0;
                    opacity: 1
                }
            }
            @keyframes farrisMoveUpIn {
                0% {
                    transform: translateY(-100%);
                    transform-origin: 0 0;
                    opacity: 0
                }
            
                100% {
                    transform: translateY(0);
                    transform-origin: 0 0;
                    opacity: 1
                }
            }
            @-webkit-keyframes farrisMoveUpOut {
                0% {
                    transform: translateY(0);
                    transform-origin: 0 0;
                    opacity: 1
                }
            
                100% {
                    transform: translateY(-100%);
                    transform-origin: 0 0;
                    opacity: 0
                }
            }
            @keyframes farrisMoveUpOut {
                0% {
                    transform: translateY(0);
                    transform-origin: 0 0;
                    opacity: 1
                }
            
                100% {
                    transform: translateY(-100%);
                    transform-origin: 0 0;
                    opacity: 0
                }
            }
            .toast.fadeIn {
                -webkit-animation: farrisMoveUpIn 0.2s linear;
                animation: farrisMoveUpIn 0.2s linear;
            }
            .toast.fadeOut {
                -webkit-animation: farrisMoveUpOut 0.2s linear;
                animation: farrisMoveUpOut 0.2s linear;
            }
        `
    ]
})
export class NotifyComponent implements OnInit, OnChanges {
    @Input() toast: NotifyData;
    @Output() close = new EventEmitter();
    @Output() btnClick = new EventEmitter();
    @ViewChild('notifyDiv') notifyDiv: ElementRef;

    _state = false;
    @Input() animateCls: string;
    outCls = '';
    inCls = {};

    get state() {
        return this._state;
    }

    set state(value) {
        this._state = value;
        if (value) {
            this.inCls[this.animateCls] = false;
            this.inCls['animated'] = value;
            this.inCls[this.outCls] = value;
            // this.ngZone.runOutsideAngular(() => {
            setTimeout(() => {
                this.close.next(this.toast);
            }, 200);
            // });
        }
    }

    constructor(private ngZone: NgZone) { }

    ngOnInit() {
        if (this.toast.buttons) {
            this.ngZone.runOutsideAngular(() => {
                setTimeout(() => {
                    let closeEl = this.notifyDiv.nativeElement.querySelector('.toast-close');
                    let contentEl =this.notifyDiv.nativeElement.querySelector('.toast-title-btns-wrapper');
                    if(closeEl['clientHeight']+10<contentEl['clientHeight']){
                        contentEl.classList.remove('d-flex');
                    }
                    contentEl.classList.remove('toast-title-beforeshow');
            }, 200);
            })
        }
    }

    ngOnChanges(changes: SimpleChanges) {
        this.getAnimateCls(changes.animateCls.currentValue);
    }

    getAnimateCls(cls?: any) {
        cls = cls || 'bounceInRight';
        // this.outCls = 'bounceOut' + cls.substr(8);
        // switch (cls.substr(8)) {
        //     case 'Up':
        //         this.outCls = 'bounceOutDown';
        //         break;
        //     case 'Down':
        //         this.outCls = 'bounceOutUp';
        //         break;
        // }

        this.outCls = 'fadeOut';

        // outCls += tmp;

        this.inCls = {
            [this.toast.type]: true,
            [this.toast.theme]: true,
            'animated': false,
            [cls]: true,
            [this.outCls]: this.state
        };
    }

    closeToast(event: any) {
        event.stopPropagation();
        event.preventDefault();
        this.state = true;
    }
    getPurType(): string {
        if (this.toast && this.toast.type) {
            return 'f-icon-' + this.toast.type.replace('toasty-type-', '');
        }
        return 'f-icon-default';
    }
    useButtonsTemplate() {
        return this.toast.buttons instanceof TemplateRef;
    }
    //点击事件抛出
    clickHandler(ev, btn:NotifyButton) {
        if (btn.handle) {
            this.btnClick.emit({ ev: ev, callback: btn.handle });
        }
    }
}