<template>
  <PopupTemplate ref="base" :heading="StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name)" @close="emits('close')">
    <div class="col-2 expand">
        <div class="content-l">
            <h2>General</h2>
            <div class="content-m">
                <h3>Pod</h3>
                <p class="tile-m">{{ StringUtils.format('%s/%s', pod.metadata.namespace, pod.metadata.name) }}</p>
            </div>
            <div class="content-m">
                <h3>Age</h3>
                <p class="tile-m">{{ calcAge(pod.metadata.creationTimestamp) }}</p>
            </div>
            <div class="content-m">
                <h3>Status</h3>
                <div class="left-center">
                    <PhaseComponent :phase="pod.status?.phase"></PhaseComponent>
                </div>
            </div>
        </div>
        <div class="content-l">
            <h2>Env</h2>
            <UiInput label="Filter">
                <input type="text" name="" id="" v-model="filter">
            </UiInput>
            <ScrollComponent>
                <div>
                    <div class="env" v-for="env in filteredEnv">
                        <UiMask class="spaced-center" :prefix="env.key" :enabled="isSensitive(env.key)" :value="env.value"></UiMask>
                    </div>
                </div>
            </ScrollComponent>
        </div>
    </div>
  </PopupTemplate>
</template>

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

const base = ref();

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

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

const envs: Ref<EnvVar[] | undefined> = ref(undefined);
onMounted(() => {
    EnvVar.get(props.pod.metadata.namespace, props.pod.metadata.name, (_envs: EnvVar[]) => {
        envs.value = _envs;
    });
})

const filter = ref("");
const filteredEnv = computed(() => {
    if (envs.value)
    {
        return envs.value.filter(item => item.key.toLowerCase().includes(filter.value.toLowerCase()));
    }
});

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

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

defineExpose({ open });

function isSensitive(key: string)
{
    const markers = ["token", "key", "password", "secret", "private", "credential", "auth", "jwt"];
    for (const marker of markers)
    {
        if (key.toLowerCase().includes(marker) && !key.toLowerCase().includes("public"))
        {
            return true;
        }
    }
    return false;
}
</script>

<style scoped>
.env {
    background-color: var(--shade-light);
    padding: 0.25rem 0.5rem;
}
.env.env:nth-of-type(2n) {
    background-color: var(--shade-dark);
}
.env:hover {
    background-color: #cecece;
}
.env {
    display: grid;
    grid-template-columns: auto 1fr;
}
</style>
