<script>
import {authenticatedRequest} from "@/components/session/authenticatedRequest.vue";
import {booking_object} from "@/components/objects/booking_object.vue";
import {ref, watch} from "vue";

/**
 * The statistics object
 */
export const statistics = {
  query: {
    start: ref(null),
    end: ref(null),
    set: {
      start: (start_date) => {
        statistics.query.start.value = start_date;
      },
      end: (end_date) => {
        statistics.query.end.value = end_date;
      }
    },
    get: {
      start: () => {
        return statistics.query.start.value;
      },
      end: () => {
        return statistics.query.end.value;
      }
    }
  },
  requests: {
    get_query: async (uri) => {
      // Get the response from the server
      const response = await authenticatedRequest(
          uri + '?start_date=' + statistics.query.start.value + '&end_date=' + statistics.query.end.value,
          'GET',
          null
      );
      if (response.status === 200) {
        // return the response
        return response;
      } else {
        return null;
      }
    },
  },
  data: {
    labels: [],
    datasets: []
  },
  labels: ref([]),
  datasets: ref([]),
  get: {
    labels: () => {
      return statistics.labels.value;
    },
    datasets: () => {
      return statistics.datasets.value;
    }
  },
  set: {
    labels: (labels) => {
      statistics.labels.value = labels;
    },
    datasets: (datasets) => {
      statistics.datasets.value = datasets;
    }
  },
  current_view: ref('bookings_new'),
  views: {
    bookings_new: {
      name: 'New bookings',
      description: 'The number of new bookings',
      uri: '/statistics/bookings/new',
      id: 'bookings_new'
    },
    orders_new: {
      name: 'New orders',
      description: 'The number of new orders',
      uri: '/statistics/orders/new',
      id: 'orders_new'
    },
    economic_totals: {
      name: 'Economic totals',
      description: 'The economic totals',
      uri: '/statistics/economic/totals',
      id: 'economic_totals'
    },
    economic_department_total_sent: {
      name: 'Fakturaer sendt',
      description: 'The total amount invoiced',
      uri: '/statistics/economic/totals/department_sent_invoice_totals',
      id: 'economic_department_total_sent'
    },
    economic_department_invoices_drafts: {
      name: 'Facturaer udkast',
      description: 'The total amount of drafts invoices',
      uri: '/statistics/economic/totals/department_draft_invoice_totals',
      id: 'economic_department_invoices_drafts'
    },
  },
  set_view: (view) => {
    console.log('Setting view to: ' + view);
    statistics.current_view.value = view;
    statistics.fetch_view();
  },
  fetch_view: () => {
    // Get the response from the server
    statistics.requests.get_query(statistics.views[statistics.current_view.value].uri).then((response) => {
      if (response.status === 200) {
        // Set the response to the object
        statistics.datasets.value = response.data.data.datasets;
        statistics.labels.value = response.data.data.labels;
        return response.data.data;
      } else {
        return null;
      }
    });
  },
  set_time: (start_date, end_date) => {
    // Convert the time to the correct format
    statistics.query.start.value = start_date;
    statistics.query.end.value = end_date;
  }
};

// Watch the query
watch(statistics.query.get.start, (newVal) => {
  console.log('Start date changed');
  console.log(newVal);
});

watch(statistics.query.get.end, (newVal,) => {
  console.log('End date changed');
  console.log(newVal);
  // Get the new bookings
  statistics.fetch_view();
});
</script>