<template>
  <div class="content-l">
    <h2>Add Monitoring Config</h2>
    <div class="content-l">
        <div class="col-3 tile-l">
            <UiInput label="Name">
                <input type="text" v-model="config.configName">
            </UiInput>
            <UiInput label="Type">
                <select v-model="config.type">
                    <option :value="MonitoringType.VOLUME">Volume</option>
                    <option :value="MonitoringType.WORKLOAD">Workload</option>
                    <option :value="MonitoringType.HEALTHCHECK">Healthcheck</option>
                </select>
            </UiInput>
            <UiInput label="Interval (e.g. 30s, 5m)">
                <input type="text" v-model="config.interval">
            </UiInput>
        </div>
        <div v-if="config.type === MonitoringType.VOLUME" class="tile-l col-2">
            <UiInput label="Mount Path">
                <input type="text" v-model="config.volumeConfig.mountPath">
            </UiInput>
            <UiInput label="Container Name">
                <input type="text" v-model="config.volumeConfig.containerName">
            </UiInput>
        </div>
        <div class="col-2 tile-l">
            <UiInput label="Target Typ">
                <select v-model="config.targetConfig.type">
                    <option :value="TargetType.LABEL">Label</option>
                    <option :value="TargetType.STATEFUL_SET">Stateful Set</option>
                    <option :value="TargetType.DEPLOYENT">Deployment</option>
                </select>
            </UiInput>
            <UiInput label="Target Namespace">
                <input type="text" v-model="config.targetConfig.namespace">
            </UiInput>
        </div>
        <div v-if="config.targetConfig.type === TargetType.LABEL" class="col-2 tile-l">
            <UiInput label="Key">
                <input type="text" v-model="config.targetConfig.labelKey">
            </UiInput>
            <UiInput label="Value">
                <input type="text" v-model="config.targetConfig.labelValue">
            </UiInput>
        </div>
        <div class="center">
            <UiButton @click="() => create()">Add</UiButton>
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MonitoringConfig, MonitoringConfigCreation } from '~/classes/monitoring/MonitoringConfig';
import { MonitoringType } from '~/classes/monitoring/MonitoringType';
import { TargetType } from '~/classes/monitoring/TargetType';

const config = ref(new MonitoringConfigCreation());

function create() 
{
    MonitoringConfig.create(config.value);
}
</script>

<style scoped>

</style>