import { Component, Input, OnChanges } from '@angular/core';
import { Portlet } from "./portlet";
import { StyleLoaderService } from "../../library/style-loader.service";

export type RibbonPositions = "top-left" | "top-right" | "bottom-left" | "bottom-right";

@Component({
  selector: 'rd-portlet-ribbon',
  template: `
    <div class="m-portlet m-portlet--rounded m-portlet--bordered-semi" [ngStyle]="{'position':isFullscreen ? 'fixed' : 'relative'}" 
      [ngClass]="{'rd-div-fullscreen': isFullscreen,'m-portlet--collapsed': isDefaultCollapse}">
      <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
          <span [ngStyle]="{'color': backgroundStyle.background,'font-weight':'bold'}" *ngIf="isCollapsed">
            <i [ngClass]="[icon]" *ngIf="icon"></i>
            {{text}}
          </span>
        </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>
        <div class="ribbon" [ngClass]="'ribbon-' + position">
          <span [ngStyle]="backgroundStyle" *ngIf="text">
            <i [ngClass]="[icon]" style="color:white !important" *ngIf="icon"></i>
            {{text}}
          </span>
        </div>
        <div [ngStyle]="bodyStyle">
          <ng-content select="rd-body"></ng-content>
        </div>
      </div>
      <div class="m-portlet__foot" #portletFooter [hidden]="!showFooter">
        <ng-content select="rd-footer"></ng-content>
      </div>
    </div>
  `
})
export class PortletRibbon extends Portlet implements OnChanges {
  constructor(private style: StyleLoaderService) {
    super();
    this.style.load(['./assets/css/portletRibbon.css']);
  }

  @Input("rd-position") position: RibbonPositions = "top-left";

  bodyStyle: object = {};

  ngOnChanges(changes) {
    super.ngOnChanges(changes);
    if (changes.position) {
      this.bodyStyle = {
        "margin-left": this.position.includes("left") ? "100px" : "0",
        "margin-right": this.position.includes("right") ? "100px" : "0"
      }
    }
  }
}