export class BaseHighChartsRender {
  parseSerie(series) {
    if (Array.isArray(series)) {
      const seriesOptions = series.map(serie => this.chartSerieToSeriesOptions(serie));
      return seriesOptions;
    }
    const seriesOptions = this.chartSerieToSeriesOptions(series);
    return [seriesOptions];
  }
  parseAxis(axis) {
    if (Array.isArray(axis)) {
      const axisOptions = axis.map(value => this.chartAxisToAxisOptions(value));
      return axisOptions;
    }
    const axisOptions = this.chartAxisToAxisOptions(axis);
    return axisOptions;
  }
  parseTitle(title) {
    return {
      text: title,
    };
  }
  parseSubTitle(subTtile) {
    return {
      text: subTtile,
    };
  }
  buildFormatterTooltip(series) {
    const seriesArray = Array.isArray(series) ? series : [series];
    return {
      formatter: function (tooltip) {
        const indexSerie = seriesArray.findIndex(serie => serie.name === this.series.name && serie.toolTipFormatter);
        if (indexSerie !== -1) {
          return seriesArray[indexSerie].toolTipFormatter(this.series.name, this.x, this.y, this.point.name, this.point.percentage);
        }
        return tooltip.defaultFormatter.call(this, tooltip);
      }
    };
  }
  buildOnClickCallBack(evt) {
    return function (_e) {
      evt.emit({
        name: this.series.name,
        data: this.series.data,
        type: this.series.type,
        yAxis: this.x,
      });
    };
  }
  buildResposiveConfig() {
    return {
      rules: [
        {
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              enabled: false
            },
            xAxis: {
              labels: {
                enabled: false
              },
              gridLineWidth: 0
            },
            yAxis: {
              labels: {
                enabled: false
              },
              gridLineWidth: 0
            }
          }
        },
        {
          condition: {
            maxWidth: 600
          },
          chartOptions: {
            xAxis: {
              labels: {
                style: {
                  fontSize: '10px'
                }
              }
            },
            yAxis: {
              labels: {
                style: {
                  fontSize: '10px'
                },
              }
            },
            title: {
              style: {
                fontSize: '14px'
              }
            },
            subtitle: {
              style: {
                fontSize: '12px'
              }
            }
          }
        },
        {
          condition: {
            maxWidth: 400
          },
          chartOptions: {
            chart: {
              margin: [10, 10, 15, 10],
            },
            subtitle: {
              text: null
            },
            title: {
              text: null
            }
          }
        }
      ]
    };
  }
  buildDefaultChartOptions() {
    return {
      credits: {
        enabled: false
      }
    };
  }
  chartSerieToSeriesOptions(serie) {
    const { name, data, color, showDataLabel, type, yAxis } = serie;
    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (name && { name })), (type && { type })), (data && { data })), (color && { color })), (showDataLabel && { dataLabels: { enabled: showDataLabel } })), (yAxis !== undefined && { yAxis }));
  }
  chartAxisToAxisOptions(axis) {
    const { categories, color, text, invertedPosition, formatter, type } = axis;
    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (categories && { categories })), (text && {
      title: Object.assign({ text }, (color && { style: { color } }))
    })), (formatter && {
      labels: {
        formatter: function () { return formatter(this.value); },
      }
    })), (invertedPosition && { opposite: invertedPosition })), (type && { type }));
  }
}
