import { Component, Input, ViewChildren, QueryList, AfterContentChecked, OnInit, Output, EventEmitter, NgZone, HostListener } from '@angular/core';
import { NotifyConfig, NotifyData } from './notifiy.options';
import { isFunction } from 'lodash-es';
import { NotifyComponent } from './notify.component';

@Component({
    selector: 'farris-notify-container',
    template: `
    <div [id]="id" class="farris-notify" [ngClass]="[position]" [ngStyle]="style">
        <farris-notify *ngFor="let toast of toasts" [toast]="toast" [animateCls]="animateCls" (close)="closeToast(toast)" (btnClick)="btnClickHander($event,toast)"></farris-notify>
    </div>
    `
})
export class NotifyContainerComponent implements OnInit, AfterContentChecked {

    static POSITIONS: Array<String> = ['bottom-right', 'bottom-left',
        'top-right', 'top-left', 'top-center', 'bottom-center', 'center-center'];

    static ANIMATES: Array<string> = ['bounceInRight', 'bounceInLeft',
        'bounceInRight', 'bounceInLeft', 'bounceInDown', 'bounceInUp', 'bounceIn'];

    private _position = '';
    style = {
        'left': '',
        'right': '',
        'top': '',
        'bottom': ''
    };
    notifyDistance = {
        'left': 12,
        'right': 12,
        'top': 136,
        'bottom': 12
    };

    animateCls = 'fadeIn';

    config: NotifyConfig;

    id = '';

    @ViewChildren(NotifyComponent) notifyCmpList: QueryList<NotifyComponent>;


    @Output() empty = new EventEmitter();

    @Input() set position(value: string) {
        if (value) {
            let notFound = true;
            for (let i = 0; i < NotifyContainerComponent.POSITIONS.length; i++) {
                if (NotifyContainerComponent.POSITIONS[i] === value) {
                    notFound = false;
                    break;
                }
            }

            if (notFound) {
                value = this.config.position;
            }
        } else {
            value = this.config.position;
        }

        // console.log(this.config);


        // if (value === 'center-center') {
        //     this.animateCls = 'bounceIn';
        // } else {
        const i = NotifyContainerComponent.POSITIONS.indexOf(value);
        //this.animateCls = NotifyContainerComponent.ANIMATES[i];
        this.animateCls = 'fadeIn';
        //}

        this._position = 'toasty-position-' + value;

        if (this.config.left) {
            this.notifyDistance.left = this.config.left;
        }
        if (this.config.right) {
            this.notifyDistance.right = this.config.right;
        }
        if (this.config.top) {
            this.notifyDistance.top = this.config.top;
        }
        if (this.config.bottom) {
            this.notifyDistance.bottom = this.config.bottom;
        }
        this.initstyle();
        if (value === 'top-left') {
            this.style.left = `${this.notifyDistance.left}px`;
            this.style.top = `${this.notifyDistance.top}px`;
        }
        else if (value === 'top-center') {
            this.style.top = `${this.notifyDistance.top}px`;
        }
        else if (value === 'top-right') {
            this.style.right = `${this.notifyDistance.right}px`;
            this.style.top = `${this.notifyDistance.top}px`;
        }
        else if (value === 'bottom-left') {
            this.style.left = `${this.notifyDistance.left}px`;
            this.style.bottom = `${this.notifyDistance.bottom}px`;
        }
        else if (value === 'bottom-center') {
            this.style.bottom = `${this.notifyDistance.bottom}px`;
        }
        else if (value === 'bottom-right') {
            this.style.right = `${this.notifyDistance.right}px`;
            this.style.bottom = `${this.notifyDistance.bottom}px`;
        }

    }

    get position() {
        if (this._position) {
            return this._position;
        } else {
            return 'toasty-position-top-center';
        }
    }

    initstyle() {
        this.style = {
            'left': '',
            'right': '',
            'top': '',
            'bottom': ''
        };
    }


    toasts: Array<NotifyData> = [];

    constructor(private ngZone: NgZone) { }

    ngOnInit() {}

    @HostListener('click', ['$event'])
    onContainerClick($event: MouseEvent) {
        $event.stopPropagation();
        return false;
    }

    ngAfterContentChecked() {
        if (this.notifyCmpList && this.notifyCmpList.length) {
            this.notifyCmpList.forEach(cmp => {
                cmp.close.subscribe(() => {
                    this.clear(cmp.toast.id);
                });
            });
        }
    }

    closeToast(toast: NotifyData) {
        this.clear(toast.id);
    }

    add(notify: NotifyData) {
        if (this.toasts.length >= this.config.limit) {
            this.toasts.shift();
        }

        this.toasts.push(notify);

        if (notify.timeout) {
            this._setTimeout(notify);
        }
    }

    clear(id: number | string) {
        if (id) {
            this.toasts.forEach((value: any, key: number) => {
                if (value.id === id) {
                    if (value.onRemove && isFunction(value.onRemove)) {
                        value.onRemove.call(this, value);
                    }

                    this.toasts.splice(key, 1);
                }
            });

            if (this.toasts.length === 0) {
                this.empty.emit();
            }

        } else {
            throw new Error('Please provide id of Toast to close');
        }
    }

    clearAll() {
        this.toasts.forEach((value: any, key: number) => {
            if (value.onRemove && isFunction(value.onRemove)) {
                value.onRemove.call(this, value);
            }
        });
        this.toasts = [];
        this.empty.emit();
    }

    private findNotifyComponent(id: number | string) {
        return this.notifyCmpList.find(item => item.toast.id === id);
    }

    private _setTimeout(notify: NotifyData) {
        // this.ngZone.runOutsideAngular(() => {
        window.setTimeout(() => {
            // this.clear(notify.id);
            const cmp = this.findNotifyComponent(notify.id);
            if (cmp) {
                cmp.state = true;
                cmp.inCls[cmp.animateCls] = false;
            }
        }, notify.timeout);
        // });
    }
    btnClickHander(ev, notify: NotifyData) {
        const cmp = this.findNotifyComponent(notify.id);
        ev.callback(ev['ev'], cmp);
    }
}