<script setup lang="ts">
import type { Component } from "vue";
import { onMounted } from "vue";
import StatisticPage from "@/pages/dashboard/StatisticPage.vue";
import ProgressPage from "@/pages/dashboard/ProgressPage.vue";
import SimpleDates from "@/components/dashboard/SimpleDates.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useDashboardStore } from "@/stores/dashboard";
import type { DashboardType } from "@/gql/graphql";
import SimpleCoursePage from "@/pages/dashboard/SimpleCoursePage.vue";
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
import CourseDetailDates from "@/components/dashboard/CourseDetailDates.vue";
import NoCourseSession from "@/components/dashboard/NoCourseSession.vue";

const dashboardStore = useDashboardStore();

interface DashboardPage {
  main: Component;
  aside: Component;
}

const boards: Record<DashboardType, DashboardPage> = {
  PROGRESS_DASHBOARD: { main: ProgressPage, aside: SimpleDates },
  SIMPLE_DASHBOARD: { main: SimpleCoursePage, aside: SimpleDates },
  STATISTICS_DASHBOARD: { main: StatisticPage, aside: CourseDetailDates },
};

onMounted(dashboardStore.loadDashboardDetails);
</script>

<template>
  <div v-if="dashboardStore.loading" class="m-8 flex justify-center">
    <LoadingSpinner />
  </div>
  <div
    v-else-if="dashboardStore.currentDashboardConfig"
    class="flex flex-col lg:flex-row"
  >
    <main class="grow bg-gray-200 lg:order-2">
      <div class="m-8">
        <div class="mb-10 flex items-center justify-between">
          <h1 data-cy="dashboard-title">Dashboard</h1>
          <ItDropdownSelect
            :model-value="dashboardStore.currentDashboardConfig"
            class="mt-4 w-full lg:mt-0 lg:w-96"
            :items="dashboardStore.dashboardConfigs"
            @update:model-value="dashboardStore.switchAndLoadDashboardConfig"
          ></ItDropdownSelect>
        </div>

        <component
          :is="boards[dashboardStore.currentDashboardConfig.dashboard_type].main"
        ></component>
      </div>
    </main>
    <aside class="m-8 lg:order-1 lg:w-[343px]">
      <component
        :is="boards[dashboardStore.currentDashboardConfig.dashboard_type].aside"
      ></component>
    </aside>
  </div>
  <NoCourseSession v-else class="container-medium mt-14" />
</template>
