import { Widget } from "./Widget";
import { GradientColor } from "./GradientColor";
/**
 * @class ui.Legend
 * @since ui
 */
export class Legend extends Widget {
  private data: any;
  private type: string;
  private nodeWidth: string;
  private colorResult: string[] = [];
  /**
   * @hideconstructor
   * @param {object} [data]  图例的组成样式数据。
  * @param {object} [style]  在地图上的位置，数据为对象。right：距离右侧的位置，bottom：距离下面的位置，width：宽，height：高
   * @param {string} [type]  图例的类型：continue或者classify。
   * @param {Function} [onClick]  点击回调方法。
   * @return ui.Legend
   */
  constructor(data?: object, style?: object, type?: string, onClick?: Function) {
    let isBrower=false;
    if (typeof process === 'undefined') {
        isBrower=true;
    }
    if (!isBrower) {
      style=null;
    }
    super(null, style);
    if (isBrower) {
      this.data = data;
      this.type = type || "continue";
      this.num(this.data)
      super(this.render(data), style);
    }
    if (!(this instanceof Legend)) {
      return new Legend(data, style, type, onClick);
    }
    if (onClick) {
      this.render(data).onclick = function () {
        onClick();

      }
    }

  }
  private num(data?: any) {
    let len = new GradientColor()
    const step = data.step;
    for (let i = 0; i < data.colors.length; i++) {
      const startColor = data.colors[i];
      const endColor = data.colors[i + 1] || startColor;
      const gradient = len.gradientColor(startColor, endColor, step);
      this.colorResult.push(...gradient)
    }
    let num: number = parseInt(super.style().style.width.replace('px', ''))
    // 获取每一个渐变div的宽度
    this.nodeWidth = (num / this.colorResult.length).toFixed(3)
  }
  // 生成添加的dom节点
  private render(data: any) {
    const container = document.createElement("div");
    container.classList.add("ui-gvee-legend");
    // 创建legend容器div   创建3个子元素
    const title = document.createElement("div");
    // div title
    title.innerHTML = this.data.title;
    title.classList.add("ui-gvee-title");
    container.appendChild(title);
    // 2color
    const colorsDiv = document.createElement("div");
    colorsDiv.classList.add("ui-gvee-legend-colors");
    this.colorResult.map((color: any) => {
      const div = document.createElement("div");
      div.style.width = `${this.nodeWidth}px`;
      div.style.height = "100%";
      div.style.backgroundColor = color;
      colorsDiv.appendChild(div);
    });
    container.appendChild(colorsDiv);
    // 3labes
    const labels = document.createElement("div");
    labels.classList.add("ui-gvee-legend-labels");
    for (const label of this.data.labels) {
      const labelDiv = document.createElement("div");
      labelDiv.innerHTML = label;
      labelDiv.classList.add("ui-gvee-label-item");
      labels.appendChild(labelDiv);
    }
    container.appendChild(labels);
    const box = document.createElement("div");
    box.classList.add("ui-gvee-legend-box");
    box.appendChild(container);
    return box
  }

  /**
 * 设置图例显示内容。
 * @return {object} ui.Legend
 */
  setContent(content: object) {
    this.data = content;
    this.render(this.data);
    return this;
  }
  /**
*  返回图例显示内容。
* @return Object
*/
  getContent() {

    return this.data;
  }

  /**
* 返回文本组件样式。
* @return String
*/
  getStyle() {
    return this.styleDic.style
  }

  /**
* 设置文本组件样式。
* @param {object} style 文本组件样式
* @return String
*/
  setStyle(style: object) {
    for (let key in style) {
      if (key === 'position') {
        const pos = this.posDic[style[key]];
        if (pos) {
          (this.el as HTMLElement).classList.add('positioned', ...pos);
        }
      } else {
        this.styleDic.set(key, style[key]);
        (this.el as HTMLElement).style[key] = style[key];
      }
    }
    return this
  }

  /**
  * 设置图例样式（continue或者classify）。
  * @param {string} type 图例样式
  * @return String 
  */
  setType(type: string) {
    this.type = type;
    this.render(this.data);
    return this

  }
  /**
*  返回图例样式。
* @return Object
*/
  getType() {
    return this.type;
  }

  /**
* 点击图例回调方法。
* @return null
*/
  onClick(callback: Function) {

    this.render(this.data).onclick = function () {
      callback();
    }
  }

}