export default {
  props: ['callback', 'max', 'postCallback', 'plugin'],
  methods: {
    labelColor() {
      let style = getComputedStyle(document.body)
      return style.getPropertyValue('--gray').trim()
    },
    fontFamily() {
      let style = getComputedStyle(document.body)
      return style.getPropertyValue('font-family').trim()
    },
    chartOptions() {
      let self = this
      let chart = {
        responsive: true,
        maintainAspectRatio: false,
        scaleOverride: true,
        elements: {
          rectangle: {
            borderWidth: 3,
          },
        },
        legend: {
          display: false,
        },
        scales: {
          yAxes: [
            {
              gridLines: {
                tickMarkLength: 8,
              },
              ticks: {
                fontSize: 12,
                padding: 10,
                fontColor: this.labelColor(),
                fontFamily: this.fontFamily(),
                offset: true,
                beginAtZero: true,
              },
              beforeBuildTicks: function(chart) {
                if (typeof self.$props.max !== 'undefined' && chart.max < self.$props.max) {
                  chart.max = self.$props.max
                } else {
                  chart.max = chart.max * 1.1
                }
              },
            },
          ],
          xAxes: [
            {
              barPercentage: 0.8,
              categoryPercentage: 0.6,
              gridLines: {
                tickMarkLength: 8,
              },
              ticks: {
                fontSize: 12,
                fontColor: self.labelColor(),
                fontFamily: self.fontFamily(),
                offset: true,
              },
            },
          ],
        },
      }
      if (typeof self.$props.callback !== 'undefined') {
        chart.scales.yAxes[0].ticks.callback = self.$props.callback
      }
      return chart
    },
    processColors(data) {
      return data.map((data, index) => {
        if (typeof data.backgroundColor !== 'undefined') {
          data.backgroundColor = this.processColor(data.backgroundColor, data)
        }
        if (typeof data.borderColor !== 'undefined') {
          data.borderColor = this.processColor(data.borderColor, data)
        }
        if (typeof data.pointBackgroundColor !== 'undefined') {
          data.pointBackgroundColor = this.processColor(data.pointBackgroundColor, data)
        }
        return data
      })
    },
    processColor(color, data) {
      if (Array.isArray(color)) {
        for (var i = 0; i < color.length; i++) {
          color[i] = this.processColor(color[i])
        }
        return color
      } else if (typeof color === 'function') {
        return (color = this.processColor(color.bind(this)(data)))
      } else if (typeof color === 'string') {
        if (color.charAt(0) !== '-') {
          return color
        } else {
          let style = getComputedStyle(document.body)
          return style.getPropertyValue(color).trim()
        }
      } else {
        return color
      }
    },
    preProcess() {
      if (this.$props.plugin !== undefined) {
        this.addPlugin(this.$props.plugin)
      }
    },
    postProcess() {
      if (typeof this.$props.postCallback === 'function') {
        this.$props.postCallback(this.$data._chart, this)
      }
    },
  },
}
