<template>
    <div class="resource-container pod-container">
        <div class="header">
            <p>Pod</p>
            <p>Namespace</p>
            <p>Alter</p>
            <p>Node</p>
            <p>Status</p>
            <p>Aktionen</p>
        </div>
        <PodComponent v-for="pod, index in pods" :pod="pod" class="resource" :class="{ even: index % 2 }"></PodComponent>
    </div>
</template>

<script setup lang="ts">
import { type Pod } from '~/classes/Pod';
import { getPods } from '~/requests/pod';
import { useNamespaceStore } from '#imports';
import type { Namespace } from '~/classes/Namespace';

const pods: Ref<Pod[] | undefined> = ref(undefined);

const namespace = computed(useNamespaceStore().getCurrentNamespace);

let interval: NodeJS.Timeout | undefined = undefined;
onMounted(() => {
    watch(namespace, (newNamespace) => {
        loadPods(newNamespace);
        clearInterval(interval);
        interval = setInterval(() => {
            loadPods(newNamespace);
        }, 10000);
    }, { immediate: true })
})
onUnmounted(() => {
    clearInterval(interval);
});

function loadPods(namespace?: Namespace)
{
    getPods(namespace?.metadata?.name, (_pods: Pod[]) => {
        pods.value = _pods;
    });
}
</script>

<style>
.pod-container {
    grid-template-columns: auto auto auto 1fr auto auto;
}
.action-buttons {
    display: flex;
    gap: 0.5rem;
}
</style>