import { Component, Input, Output, Inject, forwardRef, EventEmitter, AfterContentInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { Portlet } from './portlet';

@Component({
  selector: "rd-tool:[rd-type=collapse]",
  template: `
    <span style="cursor:pointer" *ngIf="!portletInstance.isCollapsed">
      <rd-icon rd-class="fas fa-chevron-circle-up" [rd-color]="color" rd-size="porletIconSize" rd-animate="animate-go-up" [rd-activate-on-hover]="true" (click)="click($event)"></rd-icon>
    </span>
    <span style="cursor:pointer" *ngIf="portletInstance.isCollapsed">
      <rd-icon rd-class="fas fa-chevron-circle-down" [rd-color]="color" rd-size="porletIconSize" rd-animate="animate-go-down" [rd-activate-on-hover]="true" (click)="click($event)"></rd-icon>
    </span>
  `
})
export class PortletToolCollapse extends RdComponent implements AfterContentInit {
  constructor(@Inject(forwardRef(() => Portlet)) public portlet: Portlet) {
    super();
  }

  @Input("rd-default-collapse") defaultCollapse: boolean = false;
  @Input("rd-color") color: string = "white";
  @Input("portletInstance") portletInstance;

  @Output("rd-click") clickEvent = new EventEmitter();

  ngAfterContentInit() {
    this.portletInstance = this.portletInstance || this.portlet;

    if (this.defaultCollapse) this.portletInstance.defaultCollapse();
    else this.portletInstance.expandEvent.emit(null);
  }

  click(event) {
    event.stopPropagation();
    this.portletInstance.toggleCollapse();
    this.clickEvent.emit(null);
  }
}