<script setup lang="ts">
import ShowStartEndTime from "@partials/fields/show/ShowStartEndTime.vue";
import {useShowInstanceStore} from "@/stores/showInstance.store.ts";
import {onMounted, ref, type PropType} from "vue";
import type {ShowInstance} from "@models/show/showInstance.ts";
import {extractTime} from "@/helpers/DateFormatter.ts";
import Playlist from "@components/content/Playlist.vue";
import {getPlaylist, getPlaylistContent} from "@models/playlist.ts";
import {getUser} from "@models/User.ts";
import PlaylistEditor from "@partials/PlaylistEditor.vue";
import Sources from "@partials/Sources.vue";
import TrackList from "@partials/TrackList.vue";

const emits = defineEmits(['toggle-menu-edit-instance']);
// Props
const props = defineProps({
  showInstance: {
    type: Object as PropType<ShowInstance>,
    required: true,
  },
});

// Data

const showInstanceStore = useShowInstanceStore();
showInstanceStore.loadShowInstance(props.showInstance);

const showInstanceTime = ref({
  startsDate: new Date(showInstanceStore.currentShowInstance.starts),
  startsTime: extractTime(showInstanceStore.currentShowInstance.starts, true),
  endsDate: new Date(showInstanceStore.currentShowInstance.ends),
  endsTime: extractTime(showInstanceStore.currentShowInstance.ends, true),
});
const playlist = ref({tracks: []});

// Funcs
onMounted(async () => {
  playlist.value = await getPlaylistContent(showInstanceStore.currentShowInstance.show.autoplaylist_id)
})

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

const saveInstance = async () => {
  const startsDateTime = showInstanceTime.value.startsDate + ' ' + showInstanceTime.value.startsTime;
  const endsDateTime = showInstanceTime.value.endsDate + ' ' + showInstanceTime.value.endsTime;

  showInstanceStore.updateField({key: 'starts', value: startsDateTime})
  showInstanceStore.updateField({key: 'ends', value: endsDateTime})

  await showInstanceStore.saveShowInstance();
  goBack()
}

const update = () => {
  console.log('update')
}
</script>
<template>
  <v-row no-gutters>
    <v-label
        label="Trasmissione"
        density="compact"
    >
      Trasmissione - {{ showInstanceStore.currentShowInstance.show.name }}
    </v-label>
  </v-row>
  <v-form>
    <!-- Description (takes the whole row) -->
    <v-row no-gutters>
      <v-col cols="12">
        <v-card>
          <v-textarea
              v-model="showInstanceStore.currentShowInstance.instance_description"
              label="Descrizione istanza"
              density="compact"
              :required="true"
              rows="3"
          />
        </v-card>
      </v-col>
    </v-row>

    <!-- StartDate and EndDate (on another row) -->
    <v-row no-gutters>
      <v-col cols="12" md="6" lg="6">
        <v-date-picker
            v-model="showInstanceTime.startsDate"
            :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="showInstanceTime.endsDate"
            :min="showInstanceTime.startsDate"
            label="Data fine"
            title="Data fine"
            density="compact"
        />
      </v-col>
    </v-row>

    <!-- StartTime and EndTime (on another row) -->
    <v-row no-gutters>
      <v-col cols="12" md="6" lg="6">
        <ShowStartEndTime
            v-model="showInstanceTime.startsTime"
            :start-time-label="'Ora inizio della puntata'"
            :duration-label="'Durata'"
            :end-time-label="'Orario di fine della puntata'"
            @update:endTime="value => showInstanceTime.endsTime = value"
        />
      </v-col>
    </v-row>

    <!-- Empty row for custom component -->
    <v-row no-gutters>
      <v-col>
        <TrackList
            :tracks="playlist.tracks"
            @update-tracks="update"
        />
      </v-col>
      <v-col>
        <Sources/>
      </v-col>
    </v-row>

    <!-- Actions -->
    <v-card-actions>
      <v-btn color="accent" @click="goBack">Torna indietro</v-btn>
      <v-btn color="accent" @click="saveInstance">Salva</v-btn>
    </v-card-actions>
  </v-form>
</template>
