import {Component, ElementRef, OnInit, AfterContentChecked, SimpleChanges} from '@angular/core';
import StorageService from "@common/services/storage";
import {ActivationEnd, NavigationEnd, Router} from "@angular/router";
import SettingService from "@common/services/setting";

declare const window: any;
declare const $: any;

@Component({
    selector: 'siteContabs',
    templateUrl: './template.html',
    styleUrls: ['./style.less']
})
export default class SiteContabs implements OnInit {
    private tabs: any = [];
    private currentIndex = 0;
    private $navElement: any;
    private otherData: any = {};

    constructor(private storeService: StorageService,
                private el: ElementRef,
                private router: Router,
                private settingService: SettingService,
                private storageService: StorageService) {
        this.tabs = JSON.parse(storageService.get('contabs')) || [];
        let ActivationEnds: any = [];
        this.router.events.subscribe((event: any) => {
            if (event instanceof ActivationEnd) {
                ActivationEnds.push(event);
            } else if (event instanceof NavigationEnd) {
                if (!ActivationEnds[0].snapshot.data.hide) {
                    let data = this.getOutLetData(ActivationEnds[0].snapshot);
                    ActivationEnds = [];
                    for (var i = 0; i < this.tabs.length; i++) {
                        if (this.tabs[i].data.name == data.name) {
                            this.tabs[i].targetUrl = event.urlAfterRedirects.split(';')[0];
                            this.currentIndex = i;
                            break;
                        }
                    }
                    if (i == this.tabs.length && !data.noTab) {
                        this.tabs.push({
                            data: data,
                            targetUrl: event.urlAfterRedirects.split(';')[0]
                        });
                        this.currentIndex = this.tabs.length - 1;
                    }
                    this.storeService.set('contabs', JSON.stringify(this.tabs));
                }
                ActivationEnds = [];
                this.resize();
            }
        });
        this.settingService.pushHandler(this.resize.bind(this))
    }

    getOutLetData(obj): any {
        if (!obj) return {
            data: {}
        };
        let outletData = {};
        if (obj.data && obj.data.outlet) {
            outletData = obj.data;
        } else {
            outletData = this.getOutLetData(obj.parent);
        }
        return outletData;
    }

    close($event, item) {
        $event.preventDefault();
        $event.stopPropagation();
        for (let i = 0; i < this.tabs.length; i++) {
            if (this.tabs[i].data.name == item.data.name) {
                this.tabs.splice(i, 1);
                break;
            }
        }
        this.storeService.set('contabs', JSON.stringify(this.tabs));
        if (this.tabs.length > 0) {
            this.router.navigateByUrl(this.tabs[this.tabs.length - 1].targetUrl);
        } else {
            this.router.navigateByUrl('/admin/home')
        }
    }

    ngOnInit(): void {
        this.$navElement = $(this.el.nativeElement).find('.nav');
        setTimeout(() => {
            this.resize();
        }, 200)
    }

    resize() {
        if (this.$navElement && this.$navElement.length > 0) {
            this.otherData.showBtn = this.$navElement.width() > this.$navElement.parent().width();
        }
    }

    refresh() {
        window.location.reload()
    }

    closeOther() {
        this.tabs = [this.tabs[this.currentIndex]];
        this.storeService.set('contabs', JSON.stringify(this.tabs));
    }

    closeAll() {
        this.tabs = [];
        this.storeService.remove('contabs');
        this.router.navigateByUrl('/admin/home')
    }

    moveToLeft() {
        const left = Math.floor(this.$navElement.position().left) + 105;
        if (left < 0) {
            this.$navElement.animate({
                left: left
            }, 200)
        } else {
            this.$navElement.animate({
                left: 0
            }, 200)
        }
    }

    moveToRight() {
        const maxLeft = Math.floor(this.$navElement.parent().width() - this.$navElement.width());
        const left = Math.floor(this.$navElement.position().left) - 105;
        console.log(left, maxLeft);
        if (left > maxLeft) {
            this.$navElement.animate({
                left: left
            }, 200)
        } else {
            this.$navElement.animate({
                left: maxLeft
            }, 200)
        }
    }
}