import { Component, Input, ContentChild, ContentChildren, TemplateRef, ElementRef, OnInit, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

export type PortletToolSizes = 'small' | 'large' | 'huge';

@Component({
  selector: 'rd-menu-content',
  template: `
    <ng-content></ng-content>
  `
})
export class PortletToolMenuContent extends RdComponent {
  @Input('rd-text') header;
  @ContentChild(TemplateRef) template;
}

@Component({
  selector: 'rd-tool:[rd-type=menu]',
  template: `
    <div class="m-dropdown m-dropdown--inline m-dropdown--arrow m-dropdown--align-right" [ngClass]="sizeCLass" m-dropdown-toggle="click" m-dropdown-persistent="1" (click)="setzIndex()">
      <rd-icon [rd-class]="iconClass" rd-size="porletIconSize" [rd-text]="text" [rd-color]="iconColor" [rd-activate-on-hover]="true" rd-animate="pulse infinite" [rd-tooltip]="tooltip"></rd-icon>
      <div class="m-dropdown__wrapper"> <span class="m-dropdown__arrow m-dropdown__arrow--right"></span>
        <div class="m-dropdown__inner">
          <div class="m-dropdown__body" style="padding:0px">
            <div class="m-dropdown__content">
              <rd-accordion>
                <rd-accordion-content [rd-text]="item.header" *ngFor="let item of contents._results">    
                  <ng-template>             
                    <ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="item.template"></ng-template>                 
                  </ng-template>
                </rd-accordion-content>				
              </rd-accordion>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class PortletToolMenu extends RdComponent implements OnInit, AfterViewInit {
  constructor(private element: ElementRef) { super(); }

  @Input('rd-text') text: string;
  @Input('rd-size') size: PortletToolSizes = "large";
  @Input('rd-icon') iconClass: string = "fas fa-cogs";
  @Input('rd-icon-color') iconColor: string = "white";
  @Input('rd-tooltip') tooltip = RdLib.localization.translateEn('OPERATIONS');

  @ContentChildren(PortletToolMenuContent) contents;

  sizeCLass: string;

  ngOnInit() {
    this.iconClass += " m-dropdown__toggle dropdown-toggle";
    switch (this.size) {
      case 'small': this.sizeCLass = "m-dropdown--small"; break;
      case 'large': this.sizeCLass = "m-dropdown--large"; break;
      case 'huge': this.sizeCLass = "m-dropdown--huge"; break;
    }
  }

  ngAfterViewInit() {
    this.jQuery(this.element.nativeElement).find("ul").addClass("m-nav");
    this.jQuery(this.element.nativeElement).find("li").addClass("m-nav__item");
    this.jQuery(this.element.nativeElement).find("div").addClass("m-nav__link");
    // this.jQuery(this.element.nativeElement).find("i").addClass("m-nav__link-icon");
    // this.jQuery(this.element.nativeElement).find("span").addClass("m-nav__link-text");
  }

  setzIndex() {
    setTimeout(() => {
      this.jQuery(this.element.nativeElement).find(".m-dropdown__wrapper").css("z-index", "500");
    });
  }
}