import {
    Component, OnInit, Input, ElementRef, Renderer2, ViewChild,
    Output, EventEmitter, Inject, forwardRef, SimpleChanges, OnChanges, NgZone
} from '@angular/core';
import { AngularResizableDirective } from '@farris/ui-draggable';
import { LayoutComponent } from './../layout.component';

@Component({
    selector: 'layout-panel',
    template: `
        <div #panel #ngResizable class="layout-panel"
            [ngResizable]="split" [attr.region]="region"
            [rzHandles]="rzHandler"
            [rzMinWidth]="minWidth"
            [rzMaxWidth]="maxWidth"
            [rzMinHeight]="minHeight"
            [rzMaxHeight]="maxHeight"
            (rzResizing)="onReizing($event)"
            (rzStop) = "onResized($event)"
            (rzStart) ="onResizeStart($event)" >

            <layout-panel-title *ngIf="title" [title]="title"></layout-panel-title>

            <ng-content></ng-content>
        <div>
    `,
    styleUrls: ['./layout-panel.css']
})
export class LayoutPanelComponent implements OnInit, OnChanges {
    @Input() region: string;
    @Input() height: number;
    @Input() width: number;
    @Input() minHeight = 50;
    @Input() minWidth = 50;
    @Input() maxHeight: number;
    @Input() maxWidth: number;
    @Input() title = '';
    @Input() iconCls = '';

    private _resizable = true;
    rzHandler: string;
    private bsColClass = '';
    @Input() get split() {
        return this._resizable;
    }

    set split(val: boolean) {
        this._resizable = val;
    }


    @Input() showBorder = true;

    @Output() resizing = new EventEmitter();
    @Output() resized = new EventEmitter();

    @ViewChild('panel') panel: ElementRef;
    @ViewChild(AngularResizableDirective) ngResizable: AngularResizableDirective;

    private setStyles() {
        // this.ngZone.runOutsideAngular(() => {
            setTimeout(() => {
                let width, height;
                const rect = this.el.nativeElement.getBoundingClientRect();

                if (this.height) {
                    height = this.height;
                    this.render2.setStyle(this.el.nativeElement, 'height', height + 'px');
                    this.render2.setStyle(this.panel.nativeElement, 'height', height + 'px');
                }
                if (this.width) {
                    width = this.width;
                    if (rect.width > this.width) {
                        width = rect.width;
                        this.width = width;
                    }
                    this.render2.setStyle(this.el.nativeElement, 'width', width + 'px');
                    this.render2.setStyle(this.panel.nativeElement, 'width', width + 'px');

                    this.resetFlex();
                }
            });
        // });
    }

    private getrzHandler() {
        if (this.region) {
            let rzdir = '';
            switch (this.region) {
                case 'west':
                    rzdir = 'e';
                    break;
                case 'east':
                    rzdir = 'w';
                    break;
                case 'north':
                    rzdir = 's';
                    break;
                case 'south':
                    rzdir = 'n';
                    break;
            }

            this.rzHandler = rzdir;
        } else {
            this.rzHandler = '';
        }
    }

    isCenterPanel() {
        return this.region === 'center';
    }

    constructor(public el: ElementRef, private render2: Renderer2, private layout: LayoutComponent, private ngZone: NgZone) { }

    ngOnChanges(changes: SimpleChanges) {
        if (changes.width && !changes.width.isFirstChange()) {
            this.setStyles();
        }
    }

    private getBsClass() {
        return Array.from<string>(this.el.nativeElement.classList).find((c: string) => c.indexOf('col-') > -1);
    }
    private hasBsClass() {
        return this.getBsClass() !== undefined;
    }

    private initSize() {
        this.setStyles();

        if (this.region) {
            if (this.region === 'west' || this.region === 'east') {
                this.render2.setStyle(this.panel.nativeElement, 'height', '100%');
            }
        }
    }

    private initClass() {
        if (this.isCenterPanel()) {
            this.render2.addClass(this.panel.nativeElement, 'flex-fill');
            if (this.el.nativeElement.parentElement.attributes['layout-panel']) {
                this.render2.addClass(this.el.nativeElement.parentElement, 'd-flex');
            }

            this.render2.addClass(this.el.nativeElement, 'd-flex');
            this.render2.addClass(this.el.nativeElement, 'flex-fill');
        }

        if (this.showBorder) {
            this.render2.addClass(this.panel.nativeElement, 'layout-border');
        }
    }

    ngOnInit() {
        this.initSize();
        this.initClass();
        this.getrzHandler();

        this.bsColClass = this.getBsClass();

        this.layout.panels.push(this);
    }

    onResizeStart($event: any) {
        this.resetFlex();
    }

    private resetFlex() {
        if (this.region === 'west' || this.region === 'east') {
            this.render2.setStyle(this.el.nativeElement, 'flex', 'none');
            this.render2.setStyle(this.el.nativeElement, 'max-width', 'none');
        }
    }

    resize(size: { width?: number, height?: number }) {
        this.setStyles();
        this.onResized({ size });
    }

    onReizing($event: any) {
        this.updatePanelSize($event);
        // console.log($event);
        this.resizing.emit({ target: this, size: $event.size });
    }

    private updatePanelSize($event: any) {
        if (this.region === 'south') {
            this.render2.setStyle(this.panel.nativeElement, 'top', 0);
        }
        if (this.region === 'east') {
            this.render2.setStyle(this.panel.nativeElement, 'left', 0);
        }
        if (this.region === 'south' || this.region === 'north') {
            this.render2.setStyle(this.el.nativeElement, 'height', $event.size.height + 'px');
        }
        if (this.region === 'west' || this.region === 'east') {
            this.render2.setStyle(this.el.nativeElement, 'width', $event.size.width + 'px');
        }
    }

    onResized($event: any) {
        if (this.region === 'south' || this.region === 'north') {
            this.height = $event.size.height;
        }

        if (this.region === 'west' || this.region === 'east') {
            this.width = $event.size.width;
        }

        this.updatePanelSize($event);

        this.layout.setPanelMaxSize();
        this.resized.emit($event.size);
        this.layout.getPanel('center').resized.emit($event.size);
    }
}

@Component({
    selector: 'layout-panel-title',
    template: `
        <div class="d-flex flex-row" style="height: 28px; line-height: 28px">
            <div class="layout-panel-title">
                <span *ngIf="iconCls" [class]="iconCls"></span>
                {{ title }}
            </div>
            <div class="layout-panel-title-tools flex-fill">

            </div>
        </div>
    `
})
export class LayoutPanelTitleComponent {
    @Input() title = '';
    @Input() iconCls = '';
}