<script setup>
import PageTitle from "@/components/global/PageTitle.vue";
import RestrictedPageWrapper from "@/components/page/wrappers/RestrictedPageWrapper.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import { useRouter } from 'vue-router'
import { authenticatedRequest } from "@/components/session/authenticatedRequest.vue";
import { ref } from "vue";
import StatisticsSubPageWrapper from "@/views/dashboards/superUserDashboard/statistics/StatisticsSubPageWrapper.vue";
import StatisticsBookings from "@/views/dashboards/superUserDashboard/statistics/displays/StatisticsBookings.vue";
import StatisticsIncomeCard
  from "@/views/dashboards/superUserDashboard/statistics/displays/overview/StatisticsIncomeCard.vue";
import StatisticsDepartmentGoal
  from "@/views/dashboards/superUserDashboard/statistics/displays/overview/StatisticsDepartmentGoal.vue";
import {departments, getDepartments} from "@/components/pagination/departmentTabs.vue";

// Get the department from the route
const router = useRouter()

const StatisticsIncomeCards = {
  Today: {
    name: "I dag",
    value: null,
    icon: "fas fa-money-bill-wave",
    color: "#00d1b2",
    start_date: null,
    end_date: null,
    endpoint: "/statistics/income/today"
  },
  Yesterday: {
    name: "I går",
    value: null,
    icon: "fas fa-money-bill-wave",
    color: "#00d1b2",
    start_date: null,
    end_date: null,
    endpoint: "/statistics/income/yesterday"
  },
  LastMonth: {
    name: "Sidste måned",
    value: null,
    icon: "fas fa-money-bill-wave",
    color: "#00d1b2",
    start_date: null,
    end_date: null,
    endpoint: "/statistics/income/last-month"
  },
  ThisYear: {
    name: "I år",
    value: null,
    icon: "fas fa-money-bill-wave",
    color: "#00d1b2",
    start_date: null,
    end_date: null,
    endpoint: "/statistics/income/this-year"
  },
}

const statistics_department_today = ref([
  {
    loading: true,
  }
])

// Get the departments
getDepartments()

// Get the statistics
const getStatistics = async () => {
  // Get the statistics
  const response = await authenticatedRequest('/statistics/income/departments?start_date=' + (new Date()).toISOString().split('T')[0] + '&end_date=' + (new Date()).toISOString().split('T')[0])
  // Get the sent data
  statistics_department_today.value = response.data.data
  // Log the data
  console.log(statistics_department_today.value)
}

// Get the statistics
getStatistics()


</script>

<template>
  <RestrictedPageWrapper :hasPermission="SessionUser.canAccessSuperUser()">
    <StatisticsSubPageWrapper>
      <template #title>
        <PageTitle title="Overblik" subtitle="Se hvordan dine afdelinger klarer sig" />
      </template>
      <div>
        <!-- At a glance -->
        <div class="columns is-multiline">
          <div class="column is-3">
            <StatisticsIncomeCard v-bind="StatisticsIncomeCards.Today" />
          </div>
          <div class="column is-3">
            <StatisticsIncomeCard v-bind="StatisticsIncomeCards.Yesterday" />
          </div>
          <div class="column is-3">
            <StatisticsIncomeCard v-bind="StatisticsIncomeCards.LastMonth" />
          </div>
          <div class="column is-3">
            <StatisticsIncomeCard v-bind="StatisticsIncomeCards.ThisYear" />
          </div>
        </div>
        <!-- Afdelinger i dag -->
        <div class="columns">
          <div class="column is-8">
          </div>
          <div class="column is-4">
            <div class="card">
              <div class="card-content">
                <p class="title is-4">Afdelinger i dag</p>
                <p class="subtitle is-6">Se hvordan dine afdelinger klarer sig i dag</p>
                <!-- For each department -->
                <StatisticsDepartmentGoal v-for="department in statistics_department_today" :name="department.name" icon="fas fa-money-bill-wave" color="#00d1b2" :current="department.totalNetAmount" v-if="!statistics_department_today[0].loading" />
                <!-- If the departments are loading -->
                <StatisticsDepartmentGoal v-for="department in departments" :name="department.name" icon="fas fa-money-bill-wave" color="#00d1b2" :current="null" v-else-if="statistics_department_today[0].loading" />
                <!-- If no departments -->
                <p v-else-if="statistics_department_today.length === 0">Ingen afdelinger</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </StatisticsSubPageWrapper>
  </RestrictedPageWrapper>
</template>

<style scoped>

</style>