import { Component, Input, Output, EventEmitter, ViewChild, OnChanges, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

@Component({
  selector: 'rd-portlet',
  template: `
    <div class="m-portlet m-portlet--head-sm m-portlet--head-solid-bg m-portlet--rounded" [style.overflow]="isFullscreen ? 'auto' : 'unset'" [ngStyle]="ribbon ?  ribbonStyle : {}"
      [ngClass]="{'rd-div-fullscreen': isFullscreen, 'm-portlet--collapsed': isDefaultCollapse,'m-portlet--creative': ribbon,'m-portlet--bordered-semi': ribbon}">
      <div class="m-portlet__head" [ngStyle]="ribbon ? {} : backgroundStyle">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <ng-container *ngIf="ribbon;else default">
              <h2 class="m-portlet__head-label" [ngStyle]="backgroundStyle" style="width:max-content;height:2.5rem;color:white;top:-1rem;border-radius:5px">
                <span class="m-portlet__head-icon">
                  <i [ngClass]="[icon]" style="color:white !important"></i>
                </span>
                <span> {{text}} </span> &nbsp;
                <span><small style="font-size:.7rem" [ngStyle]="subTextCss">{{subText}}</small></span>
              </h2>
            </ng-container>

            <ng-template #default>
              <span class="m-portlet__head-icon">
                <i [ngClass]="[icon]" style="color:white !important"></i>
              </span>
              <h3 class="m-portlet__head-text">
                {{text}}
                <small style="color:white" [ngStyle]="subTextCss">{{subText}}</small>
              </h3>
            </ng-template>
          </div>
        </div>
        <div class="m-portlet__head-tools">
          <ul class="m-portlet__nav">
            <ng-content select="rd-tools"></ng-content>
          </ul>
        </div>
      </div>
      <div class="m-portlet__body" #portletBody>
        <ng-content select="rd-body"></ng-content>
      </div>
      <div class="m-portlet__foot" #portletFooter [hidden]="!showFooter">
        <ng-content select="rd-footer"></ng-content>
      </div>
		</div>
  `
})
export class Portlet extends RdComponent implements OnChanges, AfterViewInit {
  @Input("rd-text") text: string;
  @Input("rd-sub-text") subText: string;
  @Input("rd-sub-text-css") subTextCss: object = {};
  @Input("rd-icon") icon: string;
  @Input("rd-color") color: string;
  @Input("rd-ribbon") ribbon: boolean = false;

  @Output("rd-on-refresh") refreshEvent: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-on-fullscreen") fullScreenEvent: EventEmitter<any> = new EventEmitter<any>();
  @Output('rd-on-expand') expandEvent: EventEmitter<any> = new EventEmitter<any>();

  @ViewChild("portletBody") portletBody;
  @ViewChild("portletFooter") portletFooter;

  public isDefaultCollapse: boolean = false;
  isFullscreen: boolean = false;
  isCollapsed: boolean = false;
  showFooter: boolean = false;
  ribbonStyle = { "padding-top": 0, "margin-top": "2rem" };
  backgroundStyle = {
    "background": '#f4516c',
    "border-color": '#f4516c'
  };

  private refreshListeners = [];
  addRefreshListener(listener) {
    this.refreshListeners.push(listener);
  }

  ngAfterViewInit() {
    if (this.portletFooter.nativeElement.children.length) this.showFooter = true;
  }

  ngOnChanges(changes) {
    if (changes.color) {
      switch (changes.color.currentValue) {
        case 'red': this.backgroundStyle = { "background": '#f4516c', "border-color": '#f4516c' }; break;
        case 'green': this.backgroundStyle = { "background": '#34bfa3', "border-color": '#34bfa3' }; break;
        case 'purple': this.backgroundStyle = { "background": '#9816f4', "border-color": '#9816f4' }; break;
        case 'yellow': this.backgroundStyle = { "background": '#ffb822', "border-color": '#ffb822' }; break;
        case 'blue': this.backgroundStyle = { "background": '#5867dd', "border-color": '#5867dd' }; break;
        case 'aqua': this.backgroundStyle = { "background": "#2ab4c0", "border-color": "#2ab4c0" }; break;
        case 'purpleSoft': this.backgroundStyle = { "background": '#716aca', "border-color": '#716aca' }; break;
        case 'redIntense': this.backgroundStyle = { "background": '#e35b5a', "border-color": '#e35b5a' }; break;
        case 'greenHaze': this.backgroundStyle = { "background": '#44b6ae', "border-color": '#44b6ae' }; break;
        case 'yellowCasablanca': this.backgroundStyle = { "background": '#f2784b', "border-color": '#f2784b' }; break;
        case 'blueSteel': this.backgroundStyle = { "background": '#4b77Be', "border-color": '#4b77Be' }; break;
        case 'redPink': this.backgroundStyle = { "background": '#e08283', "border-color": '#e08283' }; break;
        case 'blueHoki': this.backgroundStyle = { "background": '#67809f', "border-color": '#67809f' }; break;
        case 'blueChambray': this.backgroundStyle = { "background": '#2c3e50', "border-color": '#2c3e50' }; break;
        case 'redSoft': this.backgroundStyle = { "background": '#d05454', "border-color": '#d05454' }; break;
        default: this.backgroundStyle = { "background": this.color, "border-color": this.color }; break;
      }
    }
  }

  refresh() {
    for (let listener of this.refreshListeners) listener();
    this.refreshEvent.emit(null);
  }

  toggleFullscreen() {
    this.isFullscreen = !this.isFullscreen;
    if (this.isFullscreen && this.isCollapsed) this.toggleCollapse();
    this.fullScreenEvent.emit(this.isFullscreen);
  }

  toggleCollapse() {
    this.isCollapsed = !this.isCollapsed;
    if (!this.isCollapsed) this.expandEvent.emit();
    if (this.isCollapsed) this.jQuery(this.portletBody.nativeElement).slideUp(200);
    else this.jQuery(this.portletBody.nativeElement).slideDown(200);
  }

  defaultCollapse() {
    this.isCollapsed = true;
    this.isDefaultCollapse = true;
  }
}