<script setup>
import {ref, watch} from 'vue';
import { selected_department_id, onChangeCall } from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReportObject.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { list, setEndpoint, loadList, setFilter, setMetaItemsPerPage, orderBy, setOrder } from "@/components/pagination/paginatedList.vue";
import { Colors as TemplateColors } from "@/ThemeConfig.vue";
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale, Colors,
} from 'chart.js'
import { Bar } from 'vue-chartjs'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

/** Define the data */
const options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      beginAtZero: true
    }
  }
};
const parsedList = ref({
  labels: [],
  datasets: [
    {
      label: SessionUser.objects.department_daily_reports.columns.water_usage.label,
      backgroundColor: '#f87979',
      data: []
    }
  ]
});


/** Define the functions */
const parseData = () => {
  const tmpParsedList = {
    labels: [],
    datasets: [
      {
        label: SessionUser.objects.department_daily_reports.columns.water_usage.label,
        backgroundColor: TemplateColors.global.secondaryColor,
        data: []
      },
    ]
  };
  // Sort the list by created_at date
  list.value.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
  for (let i = 0; i < list.value.length; i++) {
    // console log the day name
    let dateWeekdayNumber = SessionUser.functions.date.getDateWeekdayNumber(list.value[i].created_at);
    // Filter out saturday and sunday
    let exclude = [
        // Saturday
        SessionUser.functions.date.weekdayNumbers.saturday,
        // Sunday
        SessionUser.functions.date.weekdayNumbers.sunday
    ];
    if (exclude.includes(dateWeekdayNumber)) {
      //console.log('Excluding date', list.value[i].created_at);
      continue;
    }
    // If there's more than 5 days, remove the first one
    if (tmpParsedList.labels.length > 5) {
      tmpParsedList.labels.shift();
      tmpParsedList.datasets[0].data.shift();
    }
    tmpParsedList.labels.push(SessionUser.functions.date.toWords(list.value[i].created_at));
    // Add the water_usage_morning
    tmpParsedList.datasets[0].data.push(list.value[i].water_usage);

  }
  parsedList.value = tmpParsedList;
};

const getReports = async () => {
  if (!selected_department_id.value) {
    return;
  }
  setEndpoint('/departments/daily-reports', false);
  setMetaItemsPerPage(9,false);
  // Set the order to date
  setOrder('created_at', 'desc');
  setFilter('department_id', parseInt(selected_department_id.value), true);
};

/** Call the function */
getReports();

/** Define the watch */
onChangeCall(() => {
  getReports();
});

watch(list, () => {
  console.log('List changed', list.value);
  // Make sure the list contains data
  if (list.value !== undefined) {
    if (list.value.length > 0) {
      parseData();
    }
  }
});

</script>

<template>
  <div class="w-full h-96">
    <Bar
      :data="parsedList"
      :options="options"
    />
  </div>
</template>

<style scoped>

</style>