import {Component, ViewChild, Input, ElementRef, Renderer} from '@angular/core';
import { slideIn, fadeIn } from '../../pro/animations/animations';

@Component ({
    selector: 'sidenav',
    template: `
        <ul #sidenav id="slide-out" class="side-nav fixed {{ sidenavClass }}" >
           <ng-content></ng-content>
           <div class="sidenav-bg mask-strong"></div>    
        </ul>

        <div (click)="hide()" #overlay id="sidenav-overlay" style="display: none;"></div>

    `,
    host: {
        '(window:resize)': 'windwosResize()'
    }

})

export class SidenavComponent {
   public windwosWidth: number;
    public shown: boolean;

    @Input('class') public sidenavClass: string;

    @ViewChild('sidenav') public sideNav: ElementRef;
    @Input('fixed') public isSidenavFixed = true;
    @ViewChild('overlay') public overlay: any;





    constructor( public el: ElementRef,
                 public renderer: Renderer) {
    }

    ngAfterViewInit() {
        // pobraneie szerokosci okna po init
        this.windwosWidth = window.innerWidth;

        if (this.isSidenavFixed) {
            this.renderer.setElementClass(document.body, 'fixed-sn', true);

            if (this.windwosWidth < 1441) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
                this.setShown(false);
            } else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
                this.setShown(true);
            }
        } else {
            this.renderer.setElementClass(document.body, 'hidden-sn', true);
            this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
            this.setShown(false);
        }



    }

    windwosResize() {
        this.windwosWidth = window.innerWidth;
        if (this.isSidenavFixed) {
            if (this.windwosWidth < 1441 && !this.shown) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
                this.setShown(false);
            } else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
                this.setShown(true);
            }

            if (this.windwosWidth > 1440 && this.shown) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
                this.hideOverlay();
                this.setShown(false);
            }
       } else {
            if (this.windwosWidth > 1440) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
                this.hideOverlay();
                this.setShown(false);
            }
       }

    }


    show() {
        if (this.isSidenavFixed) {
            if (this.windwosWidth < 1441) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
                this.setShown(true);
                this.showOverlay();
            } else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
                this.setShown(true);
            }
        } else {
            this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(0%)');
            this.setShown(true);
            this.showOverlay();
        }

    }

    hide() {
         if (this.isSidenavFixed) {
            if (this.windwosWidth < 1441) {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
                this.setShown(false);
                this.hideOverlay();
            } else {
                this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
                this.setShown(false);
            }
        } else {
            this.renderer.setElementStyle(this.sideNav.nativeElement, 'transform',  'translateX(-100%)');
            this.setShown(false);
            this.hideOverlay();
        }
    }

    toggle() {
        if (this.shown) {
            this.hide();
        }  else {
            this.show();
        }
    }

    showOverlay() {
        this.renderer.setElementStyle(this.overlay.nativeElement, 'display', 'block');
        setTimeout(() => {
            this.renderer.setElementStyle(this.overlay.nativeElement, 'opacity', '1');
        }, 0);
    }

    hideOverlay() {
        this.renderer.setElementStyle(this.overlay.nativeElement, 'opacity', '0');
        setTimeout(() => {
            this.renderer.setElementStyle(this.overlay.nativeElement, 'display', 'none');
        }, 200);
    }

    setShown(value: boolean) {
        setTimeout(() => {
            this.shown = value;
        }, 510);
    }

}