<script setup lang="ts">
import {type PropType, ref, watch} from 'vue'

const props = defineProps({
  time: {
    default: '',
    type: Date
  },
  label: {
    default: '',
    type: String
  },
  timeMin: {
    default: null,
    type: [Date, null] as PropType<Date | null>
  }
})

const time = ref(props.time)
const menu = ref(true)
const timeMin = ref(props.timeMin)

watch([time, timeMin], ([newTime, newTimeMin]) => {
  if (newTimeMin && newTime.getTime() < newTimeMin.getTime()) {
    const adjustedTime = new Date(newTimeMin);
    adjustedTime.setMinutes(adjustedTime.getMinutes() + 1);
    time.value = adjustedTime;
  }
})
</script>

<template>
    <v-text-field
        :value="time"
        :active="menu"
        :focus="menu"
        :label="props.label"
        @click="menu = !menu"
        prepend-icon="mdi-clock-time-four-outline"
        readonly
    >
      <v-menu
          v-model="menu"
          :close-on-content-click="false"
          transition="scale-transition"
      >
        <v-time-picker
            v-if="menu"
            v-model="time"
            format="ampm"
            ampm-in-title=true
            full-width
        ></v-time-picker>
      </v-menu>
    </v-text-field>
</template>

<style scoped>

</style>