<script setup lang="ts">
import {computed, onMounted, type Ref, ref} from "vue";
import {useAuthStore} from "@/stores/auth.store.ts";
import {baseShow, deleteShow} from "@models/show/show.ts";
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";
import type {calendarShowEvent} from "@models/misc/calendarShowEvent.ts";
import ShowInstanceForm from "@partials/show/ShowInstanceForm.vue";
import ShowForm from "@partials/show/ShowForm.vue";
import CalendarShowEvent from "@partials/show/CalendarShowEvent.vue"
import {extractTime} from "@/helpers/DateFormatter.ts";

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

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

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

// Funcs
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 toggleEditMode = () => {
  editMode.value = !editMode.value;
};

const toggleMenuEditInstance = () => {
  showInstanceCreateEditMode.value = !showInstanceCreateEditMode.value
}

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

const contextMenuEditShow = async (showInstanceId: number) => {
  showSelected.value = showInstances.value[showInstanceId].show;
  let showDaysRules = await getShowDays({show_id: showSelected.value.id, flattenShowDays: true});
  showDaysRules.firstShow = new Date(showDaysRules.firstShow);
  // TODO Timezone problems
  showDaysRules.startTime = extractTime(showDaysRules.startTime, true);
  showSelected.value.showDays = showDaysRules;
  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;
}
</script>

<template>
  <template v-if="showCreateEditMode || showInstanceCreateEditMode">
    <ShowForm v-if="showCreateEditMode" :show="showSelected"  @go-back="resetItemEdited" />
    <ShowInstanceForm v-if="showInstanceCreateEditMode" :showInstance="selectedShowInstance" @toggle-menu-edit-instance="toggleMenuEditInstance" />
  </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>