import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

/**
 * Sample Items
 * {
 * label: 'Istanbul',
 * value: 100
 * }
 */

export interface IDonutItem {
  label: string;
  value: number;
}

declare const mApp;
declare const Morris;

@Component({
  selector: 'rd-donut',
  template: `
    <div class="m-widget14" style="padding:0">
      <div class="row align-items-center">
        <div class="col">
          <div id="m_donut" class="m-widget14__chart1" [style.height.px]="height">
          </div>
        </div>
        <div class="col">
          <div class="m-widget14__legends">
            <div class="m-widget14__legend" *ngFor="let item of items;let index = index">
              <span class="m-widget14__legend-bullet" [ngStyle]="{'background-color':donutElement?.options?.colors[index]}"></span>
              <span class="m-widget14__legend-text">{{item.label}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class Donut extends RdComponent implements AfterViewInit {
  constructor(private element: ElementRef) { super(); }

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

  donutElement;

  ngAfterViewInit() {
    let container = this.jQuery(this.element.nativeElement).find("#m_donut");
    this.donutElement = Morris.Donut({
      element: container[0],
      data: this.items,
      colors: [mApp.getColor("info"), mApp.getColor("danger"), mApp.getColor("success"), mApp.getColor("warning"), mApp.getColor("accent"), mApp.getColor("brand")]
    });
  }
}