<script setup lang="ts">
import { computed, onMounted } from 'vue';
import {
    type AnyTypeId,
    type DynamicDataType,
    isBooleanType,
    isNumericType,
} from '@/composables/dynamic.ts';

const props = defineProps<{
    type: AnyTypeId;
}>();

const model = defineModel<DynamicDataType>();

const is_numeric = computed(() => {
    return isNumericType(props.type);
});

const is_boolean = computed(() => {
    return isBooleanType(props.type);
});

// Initialize the parameter to some value:
onMounted(() => {
    if (is_numeric.value) {
        model.value = 0.0;
    } else if (is_boolean.value) {
        model.value = false;
    }
});
</script>

<template>
    <input v-if="is_numeric" type="number" v-model="model" />
    <input v-else-if="is_boolean" type="checkbox" v-model="model" />
    <span v-else>UNKNOWN INPUT</span>
</template>

<style scoped lang="scss"></style>
