<template>
    <select v-model="internalValue">
        <option :value="null">{{ noSelectionText }}</option>
        <option
            v-for="timeLabel in timeLabels" :key="timeLabel.label"
            :value="timeLabel"
        >{{ timeLabel.label }}</option>
    </select>
</template>

<script>
import { keys as injectionKeys } from '../injection';


export default {
    name: 'InputTimeLabel',
    props: {
        modelValue: { default: null },
        noSelectionText: { type: String, default: '[Not selected]' },
    },
    inject: { timeLabelStore: injectionKeys.timeLabelStore },
    data() { return {
        internalValue: null,
    }},
    computed: {
        timeLabels() {
            return this.timeLabelStore.timeLabels.value;
        },
    },
    watch: {
        modelValue: {
            handler(val, oldVal) {
                if(val == null) {
                    this.internalValue = null;
                    return;
                }
                const timeLabel = this.timeLabels.find(x => x.id === val.id);
                if(timeLabel == null) {
                    this.internalValue = null;
                    return;
                }
                this.internalValue = timeLabel;
            },
            immediate: true,
        },
        internalValue(val, oldVal) {
            this.$emit('update:modelValue', val);
        },
    },
}
</script>
