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

@Component({
  selector: "rd-tool:[rd-type=fullScreen]",
  template: `
    <span style="cursor:pointer" *ngIf="!portlet.isFullscreen">
      <rd-icon rd-class="fas fa-expand-arrows-alt" [rd-color]="color" rd-size="porletIconSize" rd-animate="animate-expand" [rd-activate-on-hover]="true" (click)="click($event)"></rd-icon>
    </span>
    <span style="cursor:pointer" *ngIf="portlet.isFullscreen">
      <rd-icon rd-class="fas fa-compress" [rd-color]="color" rd-size="porletIconSize" rd-animate="animate-shrink" [rd-activate-on-hover]="true" (click)="click($event)"></rd-icon>
    </span>
  `
})
export class PortletToolFullscreen extends RdComponent {
  constructor(@Inject(forwardRef(() => Portlet)) public portlet: Portlet, @Inject(forwardRef(() => PortletRibbon)) public portletRibbon: PortletRibbon) {
    super();
  }

  @Input("rd-color") color: string = "white";
  @Output("rd-click") clickEvent = new EventEmitter();

  click(event) {
    event.stopPropagation();
    this.portlet.toggleFullscreen();
    this.portletRibbon.toggleFullscreen();
    this.clickEvent.emit(null);
  }
}