<template>
    <PopupTemplate :heading="'Logs: ' + pod.metadata?.namespace + '/' + pod.metadata?.name" ref="base" @close="emits('close')">
        <ScrollComponent ref="scrollComponent" v-show="logs">
            <div class="console" v-if="logs">
                <p class="log" v-for="log, index in logs" :class="{ even: index % 2 }"><span>[{{ dayjs(log.timestamp).format('YYYY-MM-DD HH:mm') }}]</span><span>{{ log.message }}</span></p>
            </div>
        </ScrollComponent>
        <div v-if="logs == null" class="center" style="height: 100%; width: 100%">
            <UiLoadingIcon size="2rem"></UiLoadingIcon>
        </div>
    </PopupTemplate>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import type { Pod } from '~/classes/Pod';
import { getLogs } from '~/requests/logs';
import { Log } from '~/requests/logs';

const base = ref();

const logs: Ref<Log[] | undefined> = ref(undefined);

const props = defineProps<{
    pod: Pod
}>();

const emits = defineEmits<{
    (e: 'close'): void
}>()

const scrollComponent = ref();

onMounted(() => {
    getLogs(props.pod.metadata.uid, (_logs: Log[]) => {
        logs.value = _logs;
    });
});

onMounted(() => {
    document.addEventListener('keydown', (event) => {
        if(event.key === 'Escape') 
        {
            emits('close');
        }
    });
})
</script>

<style scoped>
.log {
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 0.25rem 1rem;
    gap: 1rem;
}
.log * {
    width: 100%;
    max-width: 100%;
    word-break: break-all;
    white-space: pre-wrap;
    color: white;
    line-height: 1.15rem;
    font-weight: 600;
}

.console {
    background-color: black;
    border-radius: 0.5rem;
    display: grid;
    padding: 1rem 0;
    align-content: start;
}
.even {
    background-color: rgb(24, 24, 24);
}
</style>