<script setup lang="ts">
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
import {useShowInstanceStore} from "@stores/show/showInstance.store.ts";
import {onMounted, ref, watch, type PropType} from "vue";
import {baseShowInstance, type ShowInstance} from "@models/show/showInstance.ts";
import {extractTime} from "@/helpers/DateFormatter.ts";
import {getPlaylistContent} from "@models/playlist.ts";
import Sources from "@partials/Sources.vue";
import TrackList from "@partials/TrackList.vue";
import {DateTime} from "luxon";
import {useShowStore} from "@stores/show/show.store.ts";

const emits = defineEmits(['toggle-menu-edit-instance']);
// Props
const props = defineProps({
  showInstance: {
    type: Number,
    required: true,
  },
});

// Store
const showInstanceStore = useShowInstanceStore();
const showStore = useShowStore()
showInstanceStore.resetShowInstance()
showStore.resetShow()

// Data
const playlist = ref({tracks: []});
const showInstanceForm = ref<ShowInstance>(baseShowInstance());
// Funcs
const updateShowInstance = async () => {
  showInstanceStore.currentShowInstance = showInstanceForm.value;
  await showInstanceStore.updateShowInstance();
  goBack()
}

const updateTracks = async () => {
  console.log('updated')
}

const goBack = () => {
  showInstanceStore.resetShowInstance();
  emits('toggle-menu-edit-instance');
}

const resetForm = () => {
  console.log()
  showInstanceForm.value = { ...showInstanceStore.currentShowInstance};
}

onMounted(async () => {
  await showInstanceStore.getShowInstance(props.showInstance, {withShow: true});
  showStore.loadShow(showInstanceStore.currentShowInstance.show);
  playlist.value = await getPlaylistContent(showStore.currentShow.autoplaylistId)
  showInstanceForm.value = { ...showInstanceStore.currentShowInstance};
})
</script>
<template>
  <v-row no-gutters>
    <v-label
        label="Trasmissione"
        density="compact"
    >
      Trasmissione - {{ showStore.currentShow.name }}
    </v-label>
  </v-row>
  <v-form>
    <!-- Description -->
    <v-row no-gutters>
      <v-col cols="12">
        <v-card>
          <v-textarea
              v-model="showInstanceForm.description"
              label="Descrizione istanza"
              density="compact"
              :required="true"
              rows="3"
          />
        </v-card>
      </v-col>
    </v-row>

    <!-- StartDate and EndDate -->
    <v-row no-gutters>
      <v-col cols="12" md="6" lg="6">
        <v-date-picker
            v-model="showInstanceForm.starts"
            :min="new Date().toISOString().substring(0, 10)"
            label="Data inizio"
            density="compact"
        />
      </v-col>
      <v-col cols="12" md="6" lg="6">
        <v-date-picker
            v-model="showInstanceForm.ends"
            :min="showInstanceForm.starts"
            label="Data fine"
            title="Data fine"
            density="compact"
        />
      </v-col>
    </v-row>

    <!-- StartTime and EndTime -->
    <v-row no-gutters>
      <v-col cols="12" md="6" lg="6">
        <ShowStartEndTime
            v-model="showInstanceForm.startTime"
            :start-time-label="'Ora inizio della puntata'"
            :duration-label="'Durata'"
            :end-time-label="'Orario di fine della puntata'"
            :pre-set-end-time="showInstanceForm.endTime"
            @update:endTime="value => showInstanceForm.endTime = value"
        />
      </v-col>
    </v-row>

    <!-- Playlist -->
    <v-row no-gutters>
      <v-col>
        <TrackList
            :tracks="playlist.tracks"
            @update-tracks="updateTracks"
        />
      </v-col>
      <v-col>
        <Sources/>
      </v-col>
    </v-row>

    <!-- Actions -->
    <v-card-actions>
      <v-btn color="red" @click="goBack">Torna indietro</v-btn>
      <v-btn color="green" @click="updateShowInstance">Salva</v-btn>
      <v-btn color="warning" @click="resetForm">Reset Form</v-btn>
    </v-card-actions>
  </v-form>
</template>
