<script setup>
  import { onMounted, ref } from 'vue';
  import { Doughnut } from 'vue-chartjs'
  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, CategoryScale, ArcElement } from 'chart.js'
  ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, ArcElement)

  const props = defineProps({
    data: {
        type: Array,
        required: true
    },
    dataModel: {
        type: Array,
    },
    targetFind: {
      type: String
    },
    targetLabel: {
        type: String
    }
  })

  const chartData = ref(null);
  const dataMap = ref([]);
  onMounted(() => {

    props.data.forEach(item => {
        const index = dataMap.value.findIndex((e) => e.name?.toUpperCase() === item?.toUpperCase());
        if(index === -1) { // Lo agrega
            if(props.dataModel) {
                const itemModel = props.dataModel.find((e) => e[props.targetFind].toUpperCase() === item.toUpperCase());
                const itemTem = {
                    label: (props.targetLabel) ? itemModel[props.targetLabel] : item,
                    data: 1,
                    ...itemModel
                };
                dataMap.value.push(itemTem)
            } else {
                dataMap.value.push({
                    label: item,
                    data: 1,
                    color: 'green'
                });
            }
        } else { // Lo actualiza
            dataMap.value[index].data += 1;
        }
    });
    chartData.value = {
          labels: dataMap.value.map((e) => e.label),
          datasets: [{ 
          data: dataMap.value.map((e) => e.data),
          backgroundColor: dataMap.value.map((e) => e.color),
        }],
    }
  })

  
    const chartOptions = {
        responsive: true,
        
    }
</script>

<template>
    <Doughnut
      id="my-chart-statictics"
      v-if="chartData"
      :options="chartOptions"
      :data="chartData"
    />
</template>

<style scoped>

</style>