<template>
  <v-table class="mt-2 mt-sm-6" style="width: 100%; background: transparent; font-size: 1rem">
    <thead>
      <tr>
        <th scope="col">Repository</th>
        <th scope="col">Pkgbase</th>
        <th scope="col">Status</th>
        <th scope="col">Reason</th>
        <th scope="col">
          LTO
          <v-tooltip activator="parent" location="bottom">
            Link time optimization;
            <br />
            Does not guarantee that package is actually built with LTO
          </v-tooltip>
        </th>
        <th scope="col">
          DS
          <v-tooltip activator="parent" location="bottom">
            Debug-symbols available via debuginfod
          </v-tooltip>
        </th>
        <th scope="col">Archlinux Version</th>
        <th scope="col">ALHP Version</th>
        <th class="text-end" scope="col" style="width: 30px">Info</th>
      </tr>
    </thead>
    <tbody id="main-tbody">
      <tr v-if="packagesStore.state.packages.length === 0">
        No Packages found
      </tr>
      <template v-else>
        <tr
          v-for="(pkg, index) in packagesStore.state.packages"
          :key="index"
          :style="`background-color: ${getStatusColor(pkg.status)};`">
          <td class="font-weight-bold text-no-wrap">
            <v-chip
              :color="getVersionColor(repoVersion(pkg.repo || ''))"
              class="me-2"
              density="comfortable"
              label
              variant="flat">
              {{ repoVersion(pkg.repo || '') }}
            </v-chip>
            {{ repoName(pkg.repo || '') }}
          </td>
          <td class="text-no-wrap">{{ pkg.pkgbase }}</td>
          <td>{{ (pkg.status || '').toLocaleUpperCase() }}</td>
          <td>{{ pkg.skip_reason || '' }}</td>
          <td><i :class="getLto(pkg.lto).class" :title="getLto(pkg.lto).title"></i></td>
          <td>
            <i :class="getDs(pkg.debug_symbols).class" :title="getDs(pkg.debug_symbols).title"></i>
          </td>
          <td>{{ pkg.arch_version }}</td>
          <td>{{ pkg.repo_version }}</td>
          <td class="d-flex align-center" style="gap: 3px">
            <a
              v-if="pkg.status === 'failed'"
              :href="`https://alhp.dev/logs/${(pkg.repo || '').slice((pkg.repo || '').indexOf('-') + 1)}/${pkg.pkgbase}.log`"
              class="text-decoration-none"
              style="
                color: darkgrey;
                transform: translateY(-3px) translateX(-22px);
                max-width: 15px;
              "
              target="_blank">
              <i class="fa fa-file-text fa-lg"></i>
            </a>
            <span v-else style="width: 15px"></span>
            <a
              :href="`https://archlinux.org/packages/?q=${pkg.pkgbase}`"
              class="text-decoration-none font-weight-bold"
              style="
                color: darkgrey;
                font-size: 18px;
                padding: 0;
                margin: 0;
                width: 15px;
                transform: translateX(-15px);
              "
              target="_blank"
              title="ArchWeb">
              AW
            </a>
            <span
              v-if="pkg.build_date && pkg.peak_mem"
              class="fa fa-info-circle fa-lg"
              style="color: darkgrey; transform: translateY(-1px); max-width: 15px !important">
              <v-tooltip activator="parent" location="start">
                {{ `Built on ${pkg.build_date}` }}
                <br />
                {{ `Peak-Memory: ${pkg.peak_mem}` }}
              </v-tooltip>
            </span>
            <span v-else style="max-width: 15px !important"></span>
          </td>
        </tr>
      </template>
    </tbody>
  </v-table>
</template>

<script lang="ts" setup>
import { usePackageDisplay } from '@/composables/Packages/usePackageDisplay'
import { usePackagesStore } from '@/stores'

const { repoName, repoVersion, getVersionColor, getStatusColor, getLto, getDs } =
  usePackageDisplay()

const packagesStore = usePackagesStore()
</script>
