<script setup lang="ts">
import CalendarShowEvent from "@/components/content/partials/CalendarShowEvent.vue";
import {computed, onMounted, type Ref, ref} from "vue";
import {useAuthStore} from "@/stores/auth.store.ts";
import ShowCreateEditForm from "@partials/show/ShowCreateEditForm.vue";
import {baseShow, deleteShow} from "@models/show/show.ts";
import type {Show} from "@models/show/show";
import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
import type { PropType} from "vue";

import {baseShowInstance, getShowInstances, type ShowInstance} from "@models/show/showInstance.ts";
import {setShowInstancesForCalendar} from "@/composables/content/dashboard_page.ts";
import {baseShowDays, getShowDays} from "@models/show/showDays.ts";

const auth = useAuthStore();
const userRole = auth.userData.user.role;

const editMode = ref(false);
const showCreateEditMode = ref(false);
const showInstanceCreateEditMode = ref(false);
const showInstances = ref<ShowInstance[]>([]);
let showSelected = ref(baseShow());
let selectedShowInstance = ref(baseShowInstance());

onMounted(async () => {
  const today = new Date();
  const startOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);

  const options = {
    withShow: true,
    starts: startOfMonth.toISOString().split('T')[0], // Format as YYYY-MM-DD
  };
  showInstances.value = await getShowInstances(options);
});


const shows: Ref<calendarShowEvent[]> = computed(() => setShowInstancesForCalendar(showInstances.value));

const toggleEditMode = () => {
  editMode.value = !editMode.value;
};

const contextMenuEditInstance = (showInstanceId: number) => {
  selectedShowInstance.value = showInstances.value[showInstanceId];
  showInstanceCreateEditMode.value = true;
};

const contextMenuEditShow = async (showInstanceId: number) => {
  showSelected.value = showInstances.value[showInstanceId].show;
  showSelected.value.showDays = await getShowDays({showId: showSelected.value.id, flattenShowDays: true});
  showCreateEditMode.value = true;
};

const contextMenuDeleteInstance = (showInstanceId: number) => {
  // deleteShowInstance([showInstances.value[showInstanceId].id])
};

const contextMenuDeleteShow = (showInstanceId: number) => {
  deleteShow([showInstances.value[showInstanceId].show.id])
};

const createShow = () => {
  showSelected.value = baseShow();
  showSelected.value.showDays = baseShowDays();
  showCreateEditMode.value = true;
};

const resetItemEdited = () => {
  showSelected.value = baseShow()
  selectedShowInstance.value = baseShowInstance();
  showCreateEditMode.value = false;
  showInstanceCreateEditMode.value = false;
}

const saveShow = () => {

}
</script>

<template>
  <template v-if="showCreateEditMode || showInstanceCreateEditMode">
    <ShowCreateEditForm v-if="showCreateEditMode" :show="showSelected"  @go-back="resetItemEdited" @save-show="saveShow"/>
<!--    <ShowInstanceCreateEditForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance">-->
  </template>
  <template v-else>
    <v-row class="ma-4 justify-space-around">
      <template v-if="userRole && (userRole == 'admin' || userRole == 'editor')">
        <v-btn color="primary" @click="createShow">Crea show</v-btn>
        <v-btn color="secondary" @click="toggleEditMode">{{ editMode ? 'Disabilita modifica calendario' : 'Abilita modifica calendario' }}</v-btn>
      </template>
    </v-row>
    <CalendarShowEvent
        :edit-mode="editMode"
        :shows="shows"
        @contextMenuEditInstance="contextMenuEditInstance"
        @contextMenuEditShow="contextMenuEditShow"
        @contextMenuDeleteInstance="contextMenuDeleteInstance"
        @contextMenuDeleteShow="contextMenuDeleteShow"
    />
  </template>
</template>

<style scoped>
</style>