import { Component, Element, Event, Method, Prop, h, } from "@stencil/core";
import { Chart, } from "chart.js";
export class Graph {
  constructor() {
    /**
     * The dataset to render graph with
     */
    this.datasets = [];
    /**
     * The labels for the graph
     */
    this.labels = [];
    /**
     * The type of graph to generate
     */
    this.type = "bar";
  }
  /**
   * Set the list datasets for the graph
   * @param datasets The datasets to render
   */
  async setDatasets(datasets) {
    return (this.datasets =
      typeof datasets === "string"
        ? JSON.parse(datasets)
        : datasets.length > 0
          ? datasets
          : this.graphEl.getAttribute("datasets")
            ? JSON.parse(this.graphEl.getAttribute("datasets"))
            : []);
  }
  /**
   * Set the list labels for the graph
   * @param labels The labels for the graph
   */
  async setLabels(labels) {
    return (this.labels =
      typeof labels === "string"
        ? JSON.parse(labels)
        : labels.length > 0
          ? labels
          : this.graphEl.getAttribute("labels")
            ? JSON.parse(this.graphEl.getAttribute("labels"))
            : []);
  }
  /**
   * Refresh the graph
   */
  async refresh() {
    try {
      setTimeout(async () => {
        const chartCanvas = this.graphEl.querySelector("canvas");
        if (chartCanvas) {
          if (this.chart) {
            await this.removeChart();
          }
        }
        this.configureGraph();
        this.chart = new Chart(chartCanvas, Object.assign({}, this.config));
      }, 200);
    }
    catch (error) {
      console.log("Error loading graph...", error);
    }
  }
  /**
   * Destroy the ChartJS instance and reset chart on state
   */
  async removeChart() {
    this.chart.destroy();
    this.chart = null;
    delete this.chart;
    return true;
  }
  onGraphClick(event, item) {
    this.floodteamGraphClick.emit({ event, item });
  }
  configureGraph() {
    this.config = {
      type: this.type,
      data: {
        labels: this.labels,
        datasets: this.datasets,
      },
      options: {},
    };
    if (!this.config.options) {
      this.config.options = {};
    }
    // if (!this.config.options.tooltips) {
    //   this.config.options.tooltips = {
    //     enabled: false,
    //     custom: (event) => {
    //       this.floodteamGraphTooltip.emit({ event: event as any });
    //     },
    //   };
    // }
    if (!this.config.options.onClick) {
      this.config.options.onClick = this.onGraphClick.bind(this);
    }
  }
  render() {
    this.refresh();
    return (h("div", { id: "graph-wrapper" },
      h("canvas", null)));
  }
  static get is() { return "floodteam-graph"; }
  static get originalStyleUrls() { return {
    "$": ["graph.css"]
  }; }
  static get styleUrls() { return {
    "$": ["graph.css"]
  }; }
  static get properties() { return {
    "datasets": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "ChartDataset[]",
        "resolved": "ChartDataset<keyof ChartTypeRegistry, (number | ScatterDataPoint | BubbleDataPoint)[]>[]",
        "references": {
          "ChartDataset": {
            "location": "import",
            "path": "chart.js"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The dataset to render graph with"
      },
      "defaultValue": "[]"
    },
    "labels": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The labels for the graph"
      },
      "defaultValue": "[]"
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The title of the graph"
      },
      "attribute": "name",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "keyof ChartTypeRegistry",
        "resolved": "\"bar\" | \"bubble\" | \"doughnut\" | \"line\" | \"pie\" | \"polarArea\" | \"radar\" | \"scatter\"",
        "references": {
          "ChartTypeRegistry": {
            "location": "import",
            "path": "chart.js"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The type of graph to generate"
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "\"bar\""
    }
  }; }
  static get events() { return [{
      "method": "floodteamGraphTooltip",
      "name": "floodteamGraphTooltip",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when a tooltip is shown over the graph"
      },
      "complexType": {
        "original": "{\n    event: {\n      afterBody: any[];\n      backgroundColor: string;\n      beforeBody: any[];\n      body: any[];\n      bodyFontColor: string;\n      bodyFontSize: number;\n      bodySpacing: number;\n      borderColor: string;\n      borderWidth: number;\n      caretPadding: number;\n      caretSize: number;\n      caretX: number;\n      caretY: number;\n      cornerRadius: number;\n      dataPoints: any[];\n      displayColors: boolean;\n      footer: any[];\n      footerFontColor: string;\n      footerFontSize: number;\n      footerMarginTop: number;\n      footerSpacing: number;\n      height: number;\n      labelStyle: TooltipLabelStyle;\n      labelTextColors: string[];\n      legendBackgroundColor: string;\n      opacity: number;\n      title: string[];\n      titleFontColor: string;\n      titleFontSize: number;\n      titleMarinBottom: number;\n      titleSpacing: number;\n      width: number;\n      x: number;\n      xAlign: number;\n      xPadding: number;\n      y: number;\n      yAlign: number;\n      yPadding: number;\n    };\n  }",
        "resolved": "{ event: { afterBody: any[]; backgroundColor: string; beforeBody: any[]; body: any[]; bodyFontColor: string; bodyFontSize: number; bodySpacing: number; borderColor: string; borderWidth: number; caretPadding: number; caretSize: number; caretX: number; caretY: number; cornerRadius: number; dataPoints: any[]; displayColors: boolean; footer: any[]; footerFontColor: string; footerFontSize: number; footerMarginTop: number; footerSpacing: number; height: number; labelStyle: TooltipLabelStyle; labelTextColors: string[]; legendBackgroundColor: string; opacity: number; title: string[]; titleFontColor: string; titleFontSize: number; titleMarinBottom: number; titleSpacing: number; width: number; x: number; xAlign: number; xPadding: number; y: number; yAlign: number; yPadding: number; }; }",
        "references": {
          "TooltipLabelStyle": {
            "location": "import",
            "path": "chart.js"
          }
        }
      }
    }, {
      "method": "floodteamGraphClick",
      "name": "floodteamGraphClick",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the graph is clicked"
      },
      "complexType": {
        "original": "{ event; item?: any }",
        "resolved": "{ event: any; item?: any; }",
        "references": {}
      }
    }]; }
  static get methods() { return {
    "setDatasets": {
      "complexType": {
        "signature": "(datasets: ChartDataset[]) => Promise<any>",
        "parameters": [{
            "tags": [{
                "text": "datasets The datasets to render",
                "name": "param"
              }],
            "text": "The datasets to render"
          }],
        "references": {
          "Promise": {
            "location": "global"
          },
          "ChartDataset": {
            "location": "import",
            "path": "chart.js"
          }
        },
        "return": "Promise<any>"
      },
      "docs": {
        "text": "Set the list datasets for the graph",
        "tags": [{
            "name": "param",
            "text": "datasets The datasets to render"
          }]
      }
    },
    "setLabels": {
      "complexType": {
        "signature": "(labels: string[]) => Promise<any>",
        "parameters": [{
            "tags": [{
                "text": "labels The labels for the graph",
                "name": "param"
              }],
            "text": "The labels for the graph"
          }],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<any>"
      },
      "docs": {
        "text": "Set the list labels for the graph",
        "tags": [{
            "name": "param",
            "text": "labels The labels for the graph"
          }]
      }
    },
    "refresh": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Refresh the graph",
        "tags": []
      }
    },
    "removeChart": {
      "complexType": {
        "signature": "() => Promise<boolean>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<boolean>"
      },
      "docs": {
        "text": "Destroy the ChartJS instance and reset chart on state",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "graphEl"; }
}
