import { Component, Input, Output, EventEmitter, ContentChildren, TemplateRef, ContentChild, ViewChildren, AfterContentInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

@Component({
  selector: 'rd-accordion-content',
  template: `
    <ng-content></ng-content>
  `
})
export class AccordionContent extends RdComponent {
  @Input("rd-text") text: string;
  @Input("rd-icon") icon: string;
  @Input("rd-icon-color") iconColor: string;
  @Output("rd-on-open") openEvent: EventEmitter<any> = new EventEmitter<any>();

  @ContentChild(TemplateRef) template;
  active = false;
}

@Component({
  selector: 'rd-accordion',
  template: `
    <div class="m-accordion m-accordion--default m-accordion--solid m-accordion--toggle-arrow" [attr.id]="'accordion' + id">
      <div class="m-accordion__item" *ngFor="let item of contents._results; let index = index">
        <div class="m-accordion__item-head" (click)="contentClicked(item,accordionBody,index)" [ngClass]="{collapsed: !item.active}">         
          <span class="m-accordion__item-icon" *ngIf="item.icon">
            <rd-icon [rd-class]="item.icon" rd-size="small" [rd-color]="item.iconColor"></rd-icon>
          </span>
          <span class="m-accordion__item-title">{{item.text}}</span> 
          <span class="m-accordion__item-mode"></span>   
        </div>
        <div #accordionBody id="accordion_{{id}}_{{index}}" class="m-accordion__item-body" [ngClass]="{collapse: !item.active}">
          <div class="m-accordion__item-content" [ngStyle]="{'max-height': maxHeight}" style="overflow:auto">
            <ng-template ngFor [ngForOf]="[1]" [ngForTemplate]="item.template"></ng-template>
          </div>
        </div>
      </div>
    </div>
  `
})
export class Accordion extends RdComponent implements AfterContentInit {
  constructor() {
    super();
    this.id = Accordion.id;
    Accordion.id++;
  }

  @Input("rd-max-height") maxHeight: string = "23rem";

  @ViewChildren("accordionBody") accordionBodys;
  @ContentChildren(AccordionContent) contents;

  id;
  public static id = 0;

  ngAfterContentInit() {
    if (this.contents._results.length) this.activateContent(this.contents._results[0]);
  }

  activeContent;
  activateContent(content) {
    if (this.activeContent) this.activeContent.active = false;
    this.activeContent = content;
    this.activeContent.active = true;
    this.activeContent.openEvent.emit();
  }

  contentClicked(content, body, index) {
    if (content.active) {
      content.active = false;
      this.activeContent = null;
      this.jQuery(body).slideUp(300);
    }
    else {
      this.activateContent(content);
      this.jQuery(body).slideDown(300);
    }

    for (let i in this.accordionBodys._results) {
      if (i != index) this.jQuery(this.accordionBodys._results[i].nativeElement).slideUp(300);
    }
  }
}