<template>
  <div id="dashboards" class="container g-3">
    <div class="row">
      <div class="mbloc col-xs-12 col-sm-4">
        <div class="custom1">
          <ul class="list-unstyled">
            <li v-if="counter.notifications > 0">
              <span :class="counterClass">
                {{
                  trans(COUNTER_UNREAD_NOTIFICATIONS, {
                    n: counter.notifications,
                  })
                }}
              </span>
            </li>
            <li v-if="counter.accompanyingCourses > 0">
              <span :class="counterClass">
                {{
                  trans(COUNTER_ASSIGNATED_COURSES, {
                    n: counter.accompanyingCourses,
                  })
                }}
              </span>
            </li>
            <li v-if="counter.works > 0">
              <span :class="counterClass">
                {{
                  trans(COUNTER_ASSIGNATED_ACTIONS, {
                    n: counter.works,
                  })
                }}
              </span>
            </li>
            <li v-if="counter.evaluations > 0">
              <span :class="counterClass">
                {{
                  trans(COUNTER_ASSIGNATED_EVALUATIONS, {
                    n: counter.evaluations,
                  })
                }}
              </span>
            </li>
            <li v-if="counter.tasksAlert > 0">
              <span :class="counterClass">
                {{
                  trans(COUNTER_ALERT_TASKS, {
                    n: counter.tasksAlert,
                  })
                }}
              </span>
            </li>
            <li v-if="counter.tasksWarning > 0">
              <span :class="counterClass">
                {{
                  trans(COUNTER_WARNING_TASKS, {
                    n: counter.tasksWarning,
                  })
                }}
              </span>
            </li>
          </ul>
        </div>
      </div>

      <template v-if="hasDashboardItems">
        <template v-for="(dashboardItem, index) in dashboardItems" :key="index">
          <div
            class="mbloc col-xs-12 col-sm-8 news"
            v-if="dashboardItem.type === 'news'"
          >
            <News />
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import News from "./DashboardWidgets/News.vue";
import {
  COUNTER_UNREAD_NOTIFICATIONS,
  COUNTER_ASSIGNATED_COURSES,
  COUNTER_ASSIGNATED_ACTIONS,
  COUNTER_ASSIGNATED_EVALUATIONS,
  COUNTER_ALERT_TASKS,
  COUNTER_WARNING_TASKS,
  trans,
} from "translator";

interface MyCustom {
  id: number;
  type: string;
  metadata: Record<string, unknown>;
  userId: number;
  position: string;
}

const store = useStore();

const counter = computed(() => ({
  notifications: store.state.homepage.notifications?.count ?? 0,
  accompanyingCourses: store.state.homepage.accompanyingCourses?.count ?? 0,
  works: store.state.homepage.works?.count ?? 0,
  evaluations: store.state.homepage.evaluations?.count ?? 0,
  tasksAlert: store.state.homepage.tasksAlert?.count ?? 0,
  tasksWarning: store.state.homepage.tasksWarning?.count ?? 0,
}));

const counterClass = { counter: true };

const dashboardItems = ref<MyCustom[]>([]);

const hasDashboardItems = computed(() => dashboardItems.value.length > 0);

onMounted(async () => {
  try {
    const response: MyCustom[] = await makeFetch(
      "GET",
      "/api/1.0/main/dashboard-config-item.json",
    );
    dashboardItems.value = response;
  } catch (error) {
    throw error;
  }
});
</script>

<style lang="scss" scoped>
div.custom4,
div.custom3,
div.custom2 {
  font-style: italic;
  color: var(--bs-chill-gray);
}
span.counter {
  & > span {
    background-color: unset;
  }
}

div.news {
  max-height: 22rem;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
