<script setup>
import {
  CheckCircleIcon,
  ExclamationTriangleIcon,
} from "@heroicons/vue/24/outline";
const serverStats = window.gcargo.status.db;
import { confirmAlert } from "@/components/Mudur-Ui-Kit/alert.js";
import { useUiStore } from "@/stores/UiStore";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { dropDB } = useUiStore();

const drop = async () => {
  confirmAlert({
    title: t("cancel_title"),
    message:
      "Tüm verileriniz silinecek ve bu işlem geri alınamaz. Devam etmek istediğinize emin misiniz?",
    onConfirm: async () => {
      await dropDB();
      window.location.reload();
    },
  });
};
</script>
<template>
  <div>
    <div class="text-indigo-600 mb-2 font-medium">Database</div>
    <div
      v-for="(stat, index) in serverStats"
      :key="index"
      :class="`flex flex-row items-center justify-between p-2 ${
        index % 2 === 0 ? 'bg-gray-100' : ''
      }`"
    >
      <template v-if="stat.key && stat.key === 'table'">
        <span v-text="stat.label" />
        <CheckCircleIcon
          v-if="stat.value === stat.label"
          class="size-4 text-green-600"
        />
        <ExclamationTriangleIcon v-else class="size-4 text-red-600" />
      </template>
      <template v-else>
        <span v-text="stat.label" />
        <span v-text="stat.value" />
      </template>
    </div>
    <div class="flex flex-row items-center justify-between p-2 bg-red-50 mt-8">
      <span class="text-red-600 font-semibold"
        >Veri tabanını sıfırla; dikkat tüm gönderileriniz silinecektir ve bu
        işlem geri alınamaz.</span
      >
      <div
        class="px-2 py-1 bg-white border-red-600 text-red-600 border rounded cursor-pointer"
        @click="drop"
      >
        Sıfırla
      </div>
    </div>
  </div>
</template>
