import {
  ChangeDetectionStrategy,
  Component,
  Input,
  TemplateRef,
  ViewEncapsulation
} from '@angular/core';
import { IHoverInLabelsEvent, ISafeAny } from './label.type';

@Component({
  selector: 'bixi-label-tooltip',
  template: `
    <div class="bixi-label-tooltip"
      *ngIf="tooltip"
      [ngStyle]="sytle"
      [nzTooltipVisible]="true"
      [nzTooltipTrigger]="null"
      nz-tooltip
      [nzTooltipTitle]="content ? tooltipContent : defaultContent">
    </div>
    <ng-template #defaultContent>
      <div *ngIf="labels.length">
        <div *ngFor="let label of labels">{{label.index}}: {{label.word}}</div>
      </div>
      <div *ngIf="!labels.length">
        -
      </div>
    </ng-template>
    <ng-template #tooltipContent>
      <div>
        <ng-template
          [ngTemplateOutlet]="content"
          [ngTemplateOutletContext]="{$implicit: labels, labels: labels }">
        </ng-template>
      </div>
    </ng-template>
  `,
  exportAs: 'bixiLabelTooltip',
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BixiLabelTooltipComponent {
  @Input() content: TemplateRef<ISafeAny> | undefined;
  @Input() tooltip: IHoverInLabelsEvent;

  get labels() {
    return this.tooltip ? (this.tooltip.data) || [] : [];
  }

  get sytle() {
    if (!this.tooltip) {
      return {
        width: '0px',
        height: '0px'
      };
    }
    return {
      top: `${this.tooltip.position.top || 0}px`,
      left: `${this.tooltip.position.left || 0}px`,
      height: `${this.tooltip.position.height || 0}px`,
      width: `${this.tooltip.position.width || 0}px`
    };
  }
}