<template>
    <SmallPopupTemplate :heading="'Rescale ' + deployment.metadata?.name" ref="base">
        <div class="content-l">
            <div class="tile-m">
                <p class="grayed-out">Deployment</p>
                <p>{{ deployment.metadata?.namespace }}/{{ deployment.metadata?.name }}</p>
            </div>
            <UiInput>
                <div class="rescale-input" v-if="deployment.spec?.replicas">
                    <UiButton class="square" icon="remove" @click="deployment.spec.replicas--"></UiButton>
                    <input type="number" v-model="deployment.spec.replicas" min="1">
                    <UiButton class="square" icon="add" @click="deployment.spec.replicas++"></UiButton>
                </div>
            </UiInput>
            <div class="center">
                <UiButton @click="() => rescale(deployment)">Rescale</UiButton>
            </div>
        </div>
    </SmallPopupTemplate>
</template>

<script setup lang="ts">
import type { Deployment } from '~/classes/Deployment';
import { rescaleDeployment } from '~/requests/deployments';

const base = ref();

defineProps<{
    deployment: Deployment
}>();

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

defineExpose({
    open
})

function rescale(deployment: Deployment)
{
    if(deployment.spec && deployment.spec.replicas)
    {
        rescaleDeployment(deployment, deployment.spec.replicas, () => {
            base.value.close();
        });
    }
    else 
    {
        throw new Error("Replica count is null");
    }
}
</script>

<style scoped>
.rescale-input {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
}
</style>