/* eslint-disable vue/require-default-prop */

<template>
  <CChartLine :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
</template>

<script>
import CoreUtils from '~/mixins/CoreUtils'

export default {
  name: 'CChartLineSimple',
  mixins: [CoreUtils],
  props: {
    // eslint-disable-next-line vue/require-default-prop
    datasets: Array,
    // eslint-disable-next-line vue/require-default-prop
    labels: [Array, String],
    // eslint-disable-next-line vue/require-default-prop
    options: Object,
    // eslint-disable-next-line vue/require-default-prop
    plugins: Array,
    borderColor: {
      type: String,
      default: 'rgba(255,255,255,.55)'
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    },
    dataPoints: {
      type: Array,
      default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
    },
    label: {
      type: String,
      default: 'Sales'
    },
    pointed: Boolean,
    // eslint-disable-next-line vue/require-default-prop
    pointHoverBackgroundColor: String
  },
  computed: {
    pointHoverColor() {
      if (this.pointHoverBackgroundColor) {
        return this.pointHoverBackgroundColor
      } else if (this.backgroundColor !== 'transparent') {
        return this.backgroundColor
      }
      return this.borderColor
    },
    defaultDatasets() {
      return [
        {
          data: this.dataPoints,
          borderColor: this.getColor(this.borderColor),
          backgroundColor: this.getColor(this.backgroundColor),
          pointBackgroundColor: this.getColor(this.pointHoverColor),
          pointHoverBackgroundColor: this.getColor(this.pointHoverColor),
          label: this.label
        }
      ]
    },
    pointedOptions() {
      return {
        scales: {
          xAxes: [
            {
              offset: true,
              gridLines: {
                color: 'transparent',
                zeroLineColor: 'transparent'
              },
              ticks: {
                fontSize: 2,
                fontColor: 'transparent'
              }
            }
          ],
          yAxes: [
            {
              display: false,
              ticks: {
                display: false,
                min: Math.min.apply(Math, this.dataPoints) - 5,
                max: Math.max.apply(Math, this.dataPoints) + 5
              }
            }
          ]
        },
        elements: {
          line: {
            borderWidth: 1
          },
          point: {
            radius: 4,
            hitRadius: 10,
            hoverRadius: 4
          }
        }
      }
    },
    straightOptions() {
      return {
        scales: {
          xAxes: [
            {
              display: false
            }
          ],
          yAxes: [
            {
              display: false
            }
          ]
        },
        elements: {
          line: {
            borderWidth: 2
          },
          point: {
            radius: 0,
            hitRadius: 10,
            hoverRadius: 4
          }
        }
      }
    },
    defaultOptions() {
      const options = this.pointed ? this.pointedOptions : this.straightOptions
      return Object.assign({}, options, {
        maintainAspectRatio: false,
        legend: {
          display: false
        }
      })
    },
    computedDatasets() {
      return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
    },
    computedOptions() {
      return this.deepObjectsMerge(this.defaultOptions, this.options || {})
    }
  }
}
</script>
