<template>
    <PopupTemplate :heading="StringUtils.format('%s/%s', deployment.metadata.namespace, deployment.metadata.name)" @close="emits('close')">
        <div class="content-l">
            <h2>General</h2>
            <div class="content-m">
                <h3>Deployment</h3>
                <p class="tile-m">{{ deployment.metadata.namespace }}/{{ deployment.metadata.name }}</p>
            </div>
            <div class="col-4">
                <div class="content-m">
                    <h3>Desired Replicas</h3>
                    <p class="tile-m">{{ deployment.spec.replicas }}</p>
                </div>
                <div class="content-m">
                    <h3>Current Replicas</h3>
                    <p class="tile-m">{{ deployment.status.replicas }}</p>
                </div>
                <div class="content-m">
                    <h3>Available Replicas</h3>
                    <p class="tile-m">{{ deployment.status.availableReplicas }}</p>
                </div>
                <div class="content-m">
                    <h3>Ready Replicas</h3>
                    <p class="tile-m">{{ deployment.status.readyReplicas }}</p>
                </div>
            </div>
            <div class="content-m">
                <h3>Annotations (<span v-if="deployment.metadata.annotations">{{ Object.keys(deployment.metadata.annotations).length }}</span><span v-else>0</span>)</h3>
                <div class="left-center" v-if="deployment.metadata.annotations">
                    <div class="content-m">
                        <p class="tile-m" v-for="[key, value] in Object.entries(deployment.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="deployment.metadata.labels">{{ Object.keys(deployment.metadata.labels).length }}</span><span v-else>0</span>)</h3>
                <div class="content-m" v-if="deployment.metadata.labels">
                    <p class="tile-m" v-for="[key, value] in Object.entries(deployment.metadata.labels)"><span>{{ key }}:</span>&nbsp;<span>{{ value }}</span></p>
                </div>
            </div>
            <div class="content-m">
                <h3>Pods</h3>
                <div class="col-2">
                    <div class="tile-m content-s" v-for="pod in pods">
                        <div class="spaced-center">
                            <p>{{ pod.metadata.name }}</p>
                            <PhaseComponent :phase="pod.status.phase"></PhaseComponent>
                        </div>
                        <div class="left-center gap-l">
                            <div>
                                <p class="grayed-out">Age</p>
                                <p>{{ calcAge(pod.metadata.creationTimestamp) }}</p>
                            </div>
                            <div>
                                <p class="grayed-out">Restarts</p>
                                <p>{{ Pod.countRestarts(pod) }}</p>
                            </div>
                            <div>
                                <p class="grayed-out">Runs On</p>
                                <p>{{ pod.spec.nodeName }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </PopupTemplate>
</template>

<script setup lang="ts">
import PopupTemplate from "~/components/popup/PopupTemplate.vue";
import type { Deployment } from "~/classes/Deployment";
import {calcAge, Pod} from "~/classes/Pod";
import {usePopup} from "~/components/popup/Popup";

const deployment = usePopup().data() as Deployment;

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

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

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

onMounted(() => {
    Pod.getByDeployment(deployment.metadata.namespace, deployment.metadata.name, (_pods: Pod[]) => {
        pods.value = _pods;
    });
})
</script>

<style scoped>

</style>