import { Component, Input } from '@angular/core';
import { RdComponent } from "../../base/rdComponent";
import { ScriptLoaderService } from '../../library/script-loader.service';

declare var TagCanvas;

export interface ICloudItem {
  text: string,
  href: string
}

@Component({
  selector: 'rd-word-cloud',
  template: `
      <canvas [id]="tagCanvasID" [width]="width" [height]="height"></canvas>
      <div style="display: none">
        <div id="taglist">
          <ul>
            <li *ngFor="let item of items">
              <a [attr.href]="item.href" target="_blank">{{item.text}}</a>
            </li>
          </ul>
        </div>
      </div>
  `
})
export class WordCloud extends RdComponent {
  constructor(private script: ScriptLoaderService) {
    super();
    this.script.load(["./assets/js/excanvas.js", "./assets/js/tagcanvas.js"]).then(() => this.setCloud());
  }

  @Input("rd-width") width: number | string = 250;
  @Input("rd-height") height: number | string = 250;
  @Input("rd-items") items: Array<ICloudItem> = [];

  tagCanvasID = "tagcanvas" + (Math.random() * 100).toFixed(0);

  setCloud() {
    let options = {
      textFont: 'Impact,Arial Black,sans-serif',
      textHeight: 20,
      maxSpeed: 0.1,
      decel: 0.9,
      depth: 0.99,
      outlineColour: '#f6f',
      outlineThickness: 3,
      pulsateTo: 0.2,
      pulsateTime: 0.5,
      wheelZoom: false
    };

    TagCanvas.textFont = 'Trebuchet MS, Helvetica, sans-serif';
    TagCanvas.textColour = '#000';
    TagCanvas.textHeight = 15;
    TagCanvas.outlineColour = '#FA7029';
    TagCanvas.maxSpeed = 0.03;
    TagCanvas.minBrightness = 0.2;
    TagCanvas.depth = 0.92;
    TagCanvas.pulsateTo = 0.6;
    TagCanvas.initial = [0.1, -0.1];
    TagCanvas.decel = 0.98;
    TagCanvas.reverse = true;
    TagCanvas.hideTags = false;
    TagCanvas.shadow = '#ccf';
    TagCanvas.shadowBlur = 3;
    TagCanvas.weight = false;
    TagCanvas.imageScale = null;
    TagCanvas.fadeIn = 1000;

    try {
      TagCanvas.Start(this.tagCanvasID, 'taglist');
      TagCanvas.Start('smallCanvas', 'moreTags', options);
      TagCanvas.Start('otherCanvas', "options", options);
    }
    catch (e) {
      document.getElementsByTagName('canvas')[0].style.border = '0'
    }
  }
}