<template>
  <PopupTemplate ref="base" :heading="StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name)" @close="emits('close')">
    <div class="col-2 expand">
        <ScrollComponent>
            <div class="content-l">
                <h2>General</h2>
                <div class="content-m">
                    <h3>Pod</h3>
                    <p class="tile-m" v-if="pod.metadata">{{ StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name) }}</p>
                </div>
                <div class="col-2 ">
                    <div class="content-m">
                        <h3>Age</h3>
                        <p class="tile-m" v-if="pod.metadata">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
                    </div>
                    <div class="content-m">
                        <h3>Running On</h3>
                        <p class="tile-m" v-if="pod.metadata">{{ pod.spec.nodeName }}</p>
                    </div>
                </div>
                <div class="content-m">
                    <h3>Status</h3>
                    <div class="left-center">
                        <PhaseComponent :phase="pod.status?.phase"></PhaseComponent>
                    </div>
                </div>
                <div class="content-m">
                    <h3>Annotations (<span v-if="pod.metadata.annotations">{{ Object.keys(pod.metadata.annotations).length }}</span><span v-else>0</span>)</h3>
                    <div class="left-center" v-if="pod.metadata.annotations">
                        <div class="content-m">
                            <p class="tile-m" v-for="[key, value] in Object.entries(pod.metadata.annotations)"><span>{{ key }}:</span>&nbsp;<span style="overflow-wrap:anywhere; white-space: normal; width: 100%;">{{ value }}</span></p>
                        </div>
                    </div>
                </div>
                <div class="content-m">
                    <h3>Labels (<span v-if="pod.metadata.labels">{{ Object.keys(pod.metadata.labels).length }}</span><span v-else>0</span>)</h3>
                    <div class="content-m" v-if="pod.metadata.labels">
                        <p class="tile-m" v-for="[key, value] in Object.entries(pod.metadata.labels)"><span>{{ key }}:</span>&nbsp;<span>{{ value }}</span></p>
                    </div>
                </div>
                <div class="content-m">
                    <h3>Containers</h3>
                    <p class="tile-m" v-for="container in pod.spec.containers">{{ container.name }}: {{ container.image }}</p>
                </div>
            </div>
        </ScrollComponent>
        <EnvironmentViewer :pod="pod"></EnvironmentViewer>
    </div>
  </PopupTemplate>
</template>

<script setup lang="ts">
import { calcAge, type Pod } from '~/classes/Pod';
import PhaseComponent from '~/components/PhaseComponent.vue';
import ScrollComponent from '~/components/ScrollComponent.vue';
import EnvironmentViewer from './EnvironmentViewer.vue';

const base = ref();

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

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

function open() {
    base.value.open();
}

onMounted(() => {
    document.addEventListener('keydown', (event) => {
        if(event.key === 'Escape') 
        {
            base.value.close();
        }
    });
})

defineExpose({ open });
</script>