<script setup lang="ts">
import {onMounted, type PropType} from "vue";
import { ref, watch } from 'vue';
import {getShowInstances} from "@models/show/showInstance.ts";

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

const startTime = ref(props.startTime);
const duration = ref(props.duration);
const endTime = ref('');
const startMenu = ref(false);
const endMenu = ref(false);


const getDuration = (startTime: Date, endTime: Date) => {
  const diffInMilliseconds = Math.abs(startTime.getTime() - endTime.getTime());
  const remainingHours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const remainingMinutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));

  return `${remainingHours}:${remainingMinutes}`;
};

const getHoursMinutes = (timeString: string) => {
  const [ h, m ] = timeString.split(":");
  const ms = new Date().setHours(h,m);
  return new Date(ms)
};

const checkTime = () => {
  if (startTime && endTime) {
    const start = getHoursMinutes(startTime.value);
    let end = getHoursMinutes(endTime.value);

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

onMounted(() => {
  if(endTime.value == '') endTime.value=startTime.value
  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-on:update:model-value=checkTime
          ></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-on:update:model-value=checkTime
          ></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>