<template>
  <site-title :title="$t('stats')" />
  <q-card class="q-ma-md">
    <q-card-section>
      <div class="row q-ma-md q-gutter-md">
        <q-card class="row col-auto">
          <div class="col">
            <h5 class="text-primary q-ma-md">{{ i18n.global.t('database') }}</h5>
            <q-card-section>
              <div class="column q-gutter-y-sm">
                <div class="row items-center">
                  <p class="text-bold" style="min-width: 180px">
                    {{ i18n.global.t('databaseSize') }}:
                  </p>
                  <p class="q-ml-md">{{ stats }}</p>
                </div>
                <div class="row items-center">
                  <p class="text-bold" style="min-width: 180px">
                    {{ i18n.global.t('numberOfMembers') }}:
                  </p>
                  <p class="q-ml-md">{{ amounts?.members }}</p>
                </div>
                <div class="row items-center">
                  <p class="text-bold" style="min-width: 180px">
                    {{ i18n.global.t('numberOfEvents') }}:
                  </p>
                  <p class="q-ml-md">{{ amounts?.events }}</p>
                </div>
                <div class="row items-center">
                  <p class="text-bold" style="min-width: 180px">
                    {{ i18n.global.t('numberOfResponsibles') }}:
                  </p>
                  <p class="q-ml-md">{{ amounts?.responsibles }}</p>
                </div>
                <div class="row items-center">
                  <p class="text-bold" style="min-width: 180px">
                    {{ i18n.global.t('numberOfGroups') }}:
                  </p>
                  <p class="q-ml-md">{{ amounts?.groups }}</p>
                </div>
              </div>
            </q-card-section>
          </div>
        </q-card>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { appApi } from 'src/boot/axios';
import { i18n } from 'src/boot/lang';
import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
import { useNotify } from 'src/vueLib/general/useNotify';
import { databaseName } from 'src/vueLib/models/settings';
import { onMounted, ref } from 'vue';

const stats = ref();
const amounts = ref<{
  members: number;
  events: number;
  responsibles: number;
  groups: number;
}>({
  members: 0,
  events: 0,
  responsibles: 0,
  groups: 0,
});

const { NotifyResponse } = useNotify();

onMounted(async () => {
  stats.value = await appApi
    .post('/stats', { database: databaseName.value })
    .then((resp) => {
      if ((resp.data.databaseSize as number) >= 1000000000) {
        return (resp.data.data.databaseSize / 1000000000).toFixed(2) + ' GB';
      } else if ((resp.data.data.databaseSize as number) >= 1000000) {
        return (resp.data.data.databaseSize / 1000000).toFixed(2) + ' MB';
      } else if ((resp.data.data.databaseSize as number) >= 1000) {
        return (resp.data.data.databaseSize / 1000).toFixed(2) + ' kB';
      }
      return resp.data.data.databaseSize + ' B';
    })
    .catch((err) => NotifyResponse(err, 'error'));

  amounts.value.members = await appApi
    .get('/members')
    .then((resp) => {
      return resp.data.length;
    })
    .catch((err) => NotifyResponse(err, 'error'));

  amounts.value.events = await appApi
    .get('/events')
    .then((resp) => {
      return resp.data.length;
    })
    .catch((err) => NotifyResponse(err, 'error'));

  amounts.value.responsibles = await appApi
    .get('responsible')
    .then((resp) => {
      return resp.data.length;
    })
    .catch((err) => NotifyResponse(err, 'error'));

  amounts.value.groups = await appApi
    .get('/groups')
    .then((resp) => {
      return resp.data.length;
    })
    .catch((err) => NotifyResponse(err, 'error'));
});
</script>
