/* eslint-disable vue/require-default-prop */
<template>
  <CChartBar :datasets="computedDatasets" :options="computedOptions" :labels="labels" />
</template>

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

export default {
  name: 'CChartBarSimple',
  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,
    backgroundColor: {
      type: String,
      default: 'rgba(0,0,0,.2)'
    },
    // eslint-disable-next-line vue/require-default-prop
    pointHoverBackgroundColor: String,
    dataPoints: {
      type: Array,
      default: () => [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
    },
    label: {
      type: String,
      default: 'Sales'
    },
    pointed: Boolean
  },
  computed: {
    defaultDatasets() {
      return [
        {
          data: this.dataPoints,
          backgroundColor: this.getColor(this.backgroundColor),
          pointHoverBackgroundColor: this.getColor(this.pointHoverBackgroundColor),
          label: this.label,
          barPercentage: 0.5,
          categoryPercentage: 1
        }
      ]
    },
    defaultOptions() {
      return {
        maintainAspectRatio: false,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              display: false
            }
          ],
          yAxes: [
            {
              display: false
            }
          ]
        }
      }
    },
    computedDatasets() {
      return this.deepObjectsMerge(this.defaultDatasets, this.datasets || {})
    },
    computedOptions() {
      return this.deepObjectsMerge(this.defaultOptions, this.options || {})
    }
  }
}
</script>