<template>
  <div v-if="collection" class="content-l">
    <div class="spaced-center">
        <div class="left-center">
            <h2>{{ collection.name }}</h2>
            <UiButton icon="add" reverse @click="() => useRouter().push(useRoute().fullPath + '/add')">Add Config</UiButton>
        </div>
        <TimeframePicker @select="(_period: Period) => period = _period"></TimeframePicker>
    </div>
    <div class="content-l" v-for="config in collection.configs" v-if="period">
        <VolumeMonitoringConfigComponent :monitoring="config" :period="period" v-if="config.type === 'VOLUME'"></VolumeMonitoringConfigComponent>
        <MemoryMonitoringConfigComponent :monitoring="config" :period="period" v-if="config.type === 'WORKLOAD'"></MemoryMonitoringConfigComponent>
        <CpuMonitoringConfigComponent :monitoring="config" :period="period" v-if="config.type === 'WORKLOAD'"></CpuMonitoringConfigComponent>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MonitoringCollection } from '~/classes/monitoring/MonitoringCollection';
import VolumeMonitoringConfigComponent from '~/components/monitorings/volumes/VolumeMonitoringConfigComponent.vue';
import TimeframePicker from '~/components/monitorings/TimeframePicker.vue';
import type { Period } from '~/components/monitorings/Period';
import MemoryMonitoringConfigComponent from '~/components/monitorings/memory/MemoryMonitoringConfigComponent.vue';
import CpuMonitoringConfigComponent from '~/components/monitorings/cpu/CpuMonitoringConfigComponent.vue';

const period: Ref<Period | undefined> = ref(undefined);

const collection: Ref<MonitoringCollection | undefined> = ref(undefined);

onMounted(() => {
    const id = useRoute().params.collectionId as string;
    MonitoringCollection.getById(id, (_collection: MonitoringCollection) => {
        collection.value = _collection;
    });
});
</script>

<style scoped>

</style>