<script>
import SquareCard from "~/components/atoms/card/SquareCard";
import ContentRows from "~/components/atoms/utility/ContentRows";
import PlainLabel from "~/components/atoms/label/PlainLabel";
import PriceLabel from "~/components/atoms/label/PriceLabel";
import BarChart from '@/plugins/Charts/BarChart'
import PieChart from '@/plugins/Charts/PieChart'

export default {
  components: {PriceLabel, PlainLabel, ContentRows, SquareCard, BarChart, PieChart},
  props: {
    title: {type: String},
    has_right_text: {default: true},
    is_currency: {default: false},
    type: {default: 'bar'},
    amount: {default: 0},
    max_height: {default: 150},
    value: {type: [Object, Array, String]},
    is_error: {default: false},
    is_empty: {default: false},
  },
  computed: {
    chartData: function () {
      let retr = null
      retr = this.mappingStats(this.value, this.title, "name", "values", (this.type === 'pie') ? true : false)
      return retr
    }
  },
  methods: {
    mappingStats(values, label_chart, key_label, key_values, pie = false) {
      let label_array = []
      let data = []
      let total = 0

      let array_colors = [this.$utility.getPrimaryColor(), "#b6b6b6", "#5fa2f4", "#5abf78",
        "#6983aa", "#e97171", "#ede682", "#ba7967", "#f1c5c5", "#f69e7b"]

      for (let item of values) {
        label_array.push(item[key_label])
        data.push(item[key_values])
        total += item[key_values]
      }

      let bg_colors = []
      for (let i = 0; i < data.length; i++) {
        let color = !pie ? this.$utility.getPrimaryColor() : array_colors.shift();
        bg_colors.push(color)
      }

      return {
        labels: label_array,
        datasets: [
          {
            label: label_chart,
            backgroundColor: bg_colors,
            data: data
          },
        ],
        totals: total
      }
    },
  }
}
</script>
<template>
  <square-card>
    <content-rows :has_gutters="false">
      <b-col>
        <plain-label :value="title" :size="16" variant="muted" :is_bold="true"/>
      </b-col>
      <b-col v-show="has_right_text" class="text-center text-md-right">
        <price-label :has_label="is_currency" :is_bold="true" :size="20" additional_class="mt-1" variant="dark"
                     :value="amount"/>
      </b-col>
    </content-rows>
    <div class="my-1">
      <bar-chart v-show="type === 'bar'" :chart-data="chartData" :height="max_height"></bar-chart>
      <pie-chart v-show="type === 'pie'" :chart-data="chartData" :height="max_height"></pie-chart>
    </div>
    <div align="center" class="my-10-vh">
      <plain-label v-show="is_error" additional_class="text-center" value="Data gagal dimuat" :size="14" variant="muted"
                   :is_bold="true"/>
    </div>
    <div v-show="is_empty" align="center" class="my-10-vh">
      <plain-label additional_class="text-center" value="Data belum tersedia" :size="14" variant="muted"
                   :is_bold="true"/>
    </div>
  </square-card>
</template>