<script setup lang="ts">
import {onMounted, type PropType} from "vue";
import { ref, watch } from 'vue';
import {getShowInstances} from "@models/show/showInstance.ts";
import {getHoursMinutesFromString, getTimeDiff} from "@/helpers/DateFormatter.ts";
// Emits, props and models
const emits = defineEmits(['update:duration'])

const props = defineProps({
  title: {
    default: 'Orari della trasmissione',
    type: String
  },
  startTimeLabel: {
    default: "Orario d'inizio della trasmissione",
    type: String
  },
  durationLabel: {
    default: "Durata",
    type: String
  },
  endTimeLabel: {
    default: "Orario di fine della trasmissione",
    type: String
  },
})

const startTime = defineModel({default: '08:00'});

// Data
const duration = ref('0:0');
const endTime = ref('');
const startMenu = ref(false);
const endMenu = ref(false);


// Func
const checkTime = () => {
  if (startTime.value && endTime) {
    const start: Date = getHoursMinutesFromString(startTime.value);
    let end: Date = getHoursMinutesFromString(endTime.value);

    if (end.getTime() <= start.getTime()) {
      end = new Date(start);
      end.setMinutes(start.getMinutes() + 60);
      endTime.value = end.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });;
    }
    duration.value = getTimeDiff(start, end);
    emits('update:duration', duration.value);
  }
}

onMounted(() => {
  if(endTime.value == '') endTime.value=startTime.value
  checkTime()
});

watch([startTime, endTime], () => {
  checkTime();
});
</script>

<template>
  <v-card class="pa-4">
    <v-card-title>{{props.title}}</v-card-title>
    <v-card-text>
      <!-- Start Time Picker -->
      <v-text-field
          v-model="startTime"
          :label=props.startTimeLabel
          prepend-icon="mdi-clock-time-four-outline"
          readonly
          @click="startMenu = true"
      >
        <v-menu
            v-model="startMenu"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-x
        >
          <v-time-picker
              v-model="startTime"
              format="ampm"
              ampm-in-title
              full-width
          ></v-time-picker>
        </v-menu>
      </v-text-field>

      <v-text-field
          v-model="endTime"
          :label=props.endTimeLabel
          prepend-icon="mdi-clock-time-four-outline"
          readonly
          @click="endMenu = true"
      >
        <v-menu
            v-model="endMenu"
            :close-on-content-click="false"
            transition="scale-transition"
        >
          <v-time-picker
              v-model="endTime"
              format="ampm"
              ampm-in-title
              full-width
              :min="startTime"
          ></v-time-picker>
        </v-menu>
      </v-text-field>
      <v-label>{{`${props.durationLabel} - ${duration}`}}</v-label>
    </v-card-text>
  </v-card>
</template>

<style scoped>
.pa-4 {
  padding: 16px;
}
</style>