import { h } from '@stencil/core';
import { ChartContext, ChartType } from './interfaces';
import { ColumnChartStrategy, BarChartStrategy, LineChartStrategy, PieChartStrategy, DonutChartStrategy } from './components';
export class EzChart {
  constructor() {
    this.STRATEGY_BY_CHART_TYPE = new Map();
    this.type = ChartType.LINE;
    this.xAxis = undefined;
    this.yAxis = undefined;
    this.chartTitle = "";
    this.chartSubTitle = "";
    this.legendEnabled = true;
    this.series = undefined;
    this.width = undefined;
    this.height = undefined;
    this.initializeStrategies();
  }
  initializeStrategies() {
    this.STRATEGY_BY_CHART_TYPE.set(ChartType.COLUMN, new ColumnChartStrategy());
    this.STRATEGY_BY_CHART_TYPE.set(ChartType.BAR, new BarChartStrategy());
    this.STRATEGY_BY_CHART_TYPE.set(ChartType.LINE, new LineChartStrategy());
    this.STRATEGY_BY_CHART_TYPE.set(ChartType.PIE, new PieChartStrategy());
    this.STRATEGY_BY_CHART_TYPE.set(ChartType.DONUT, new DonutChartStrategy());
  }
  renderChart() {
    this.chartContext.render(this._container, this.series, this.xAxis, this.yAxis, {
      title: this.chartTitle,
      subTitle: this.chartSubTitle,
      legendEnabled: this.legendEnabled,
      onClickSerie: this.ezSerieClick,
      width: this.width,
      height: this.height,
    });
  }
  componentWillLoad() {
    this.setChartStrategy();
  }
  componentWillUpdate() {
    this.renderChart();
  }
  componentDidLoad() {
    this.renderChart();
  }
  disconnectedCallback() {
    this.chartContext.destroy();
  }
  handleTypeChange() {
    this.setChartStrategy();
  }
  setChartStrategy() {
    const strategy = this.STRATEGY_BY_CHART_TYPE.get(this.type);
    if (strategy) {
      this.chartContext = new ChartContext(strategy);
      return;
    }
    this.chartContext = new ChartContext(new LineChartStrategy());
  }
  render() {
    return (h("div", { ref: (el) => this._container = el }));
  }
  static get is() { return "ez-chart"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-chart.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-chart.css"]
    };
  }
  static get properties() {
    return {
      "type": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "ChartType",
          "resolved": "ChartType.BAR | ChartType.COLUMN | ChartType.DONUT | ChartType.LINE | ChartType.PIE",
          "references": {
            "ChartType": {
              "location": "import",
              "path": "./interfaces"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o tipo de gr\u00E1fico apresentado pelo componente"
        },
        "attribute": "type",
        "reflect": false,
        "defaultValue": "ChartType.LINE"
      },
      "xAxis": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "ChartAxis | Array<ChartAxis>",
          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; type?: ChartTypeValue; })",
          "references": {
            "ChartAxis": {
              "location": "import",
              "path": "./interfaces"
            },
            "Array": {
              "location": "global"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Defini\u00E7\u00F5es do eixo X do gr\u00E1fico"
        }
      },
      "yAxis": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "ChartAxis | Array<ChartAxis>",
          "resolved": "ChartAxis[] | ({ color?: string; categories?: string[]; formatter?: (value: string | number) => string; text?: string; invertedPosition?: boolean; type?: ChartTypeValue; })",
          "references": {
            "ChartAxis": {
              "location": "import",
              "path": "./interfaces"
            },
            "Array": {
              "location": "global"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Defini\u00E7\u00F5es do eixo Y do gr\u00E1fico"
        }
      },
      "chartTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o titulo a ser apresentado no gr\u00E1fico"
        },
        "attribute": "chart-title",
        "reflect": false,
        "defaultValue": "\"\""
      },
      "chartSubTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o sub titulo a ser apresentado no gr\u00E1fico"
        },
        "attribute": "chart-sub-title",
        "reflect": false,
        "defaultValue": "\"\""
      },
      "legendEnabled": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define se a legenda do gr\u00E1fico deve ser apresentada ou n\u00E3o."
        },
        "attribute": "legend-enabled",
        "reflect": false,
        "defaultValue": "true"
      },
      "series": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "ChartSerie | Array<ChartSerie>",
          "resolved": "ChartSerie[] | ({ data: (number | ChartSerieData)[]; name?: string; color?: string; type?: \"line\" | \"column\" | \"bar\"; yAxis?: number; toolTipFormatter?: (serieName: string, xAxis: string | number, yAxis: number, dataName: string, percentage: number) => string; showDataLabel?: boolean; })",
          "references": {
            "ChartSerie": {
              "location": "import",
              "path": "./interfaces/ChartSerie"
            },
            "Array": {
              "location": "global"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define as series a serem apresentadas no gr\u00E1fico"
        }
      },
      "width": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define uma largura do gr\u00E1fico"
        },
        "attribute": "width",
        "reflect": false
      },
      "height": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define a altura do gr\u00E1fico"
        },
        "attribute": "height",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "ezSerieClick",
        "name": "ezSerieClick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Evento emitido quando ocorre um click em uma serie do gr\u00E1fico"
        },
        "complexType": {
          "original": "SerieClickEvent",
          "resolved": "{ name: string; data: number[]; type: string; yAxis: number; }",
          "references": {
            "SerieClickEvent": {
              "location": "import",
              "path": "./interfaces/ChartSerie"
            }
          }
        }
      }];
  }
  static get watchers() {
    return [{
        "propName": "type",
        "methodName": "handleTypeChange"
      }];
  }
}
