<script setup lang="ts">
import DynamicComponent from '@/components/DynamicComponent.vue';
import type {
    DynamicDataType,
    OptionalDynamicComponentData,
} from '@/composables/dynamic.ts';
import { computed, provide, ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const id = computed<string>(() => route.params.id as string);

const panel = ref<OptionalDynamicComponentData>({
    type: 'none',
});

const inputs = ref<{ [id: string]: DynamicDataType }>({});

provide('inputs', inputs);

watchEffect(async () => {
    const panel_data = await fetch(`/api/panel/${id.value}`);
    const panel_json_value = await panel_data.json();
    panel.value = JSON.parse(
        panel_json_value['data'],
    ) as OptionalDynamicComponentData;
});
</script>

<template>
    <DynamicComponent v-model:data="panel" :editable="false"></DynamicComponent>
</template>

<style scoped lang="scss">
@use '@/assets/variables';
</style>
