<script setup lang="ts">
import {computed, onActivated, onDeactivated, ref} from "vue";
import {useAuthStore} from "@/stores/auth.store.ts";
import {deleteShow} from "@models/show/show.ts";
import {baseShowInstance, deleteShowInstance, getShowInstances} from "@models/show/showInstance.ts";
import {setShowInstancesForCalendar} from "@/composables/content/dashboard_page.ts";
import ShowInstanceForm from "@partials/show/ShowInstanceForm.vue";
import ShowForm from "@partials/show/ShowForm.vue";
import CalendarShowEvent from "@partials/show/CalendarShowEvent.vue"

// 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([]);
let showSelected = ref<number>(0);
let selectedShowInstance = ref<number>(0);
const isRunning = ref(true);
let intervalId = 0;
const shows = computed(() => setShowInstancesForCalendar(showInstances.value));

// Funcs
const triggerFetchShowInstances = async (date: Date) => {
  isRunning.value = true;
  const startOfMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);

  const options = {
    withShow: true,
    starts: startOfMonth.toISOString().split('T')[0],
  };
  showInstances.value = await getShowInstances(options);
  isRunning.value = false;
}

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

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

const contextMenuEditShow = async (showInstanceId: number) => {
  showSelected.value = showInstances.value[showInstanceId].show.id;
  showCreateEditMode.value = true;
};

const contextMenuDeleteInstance = async (showInstanceId: number) => {
  await deleteShowInstance([showInstances.value[showInstanceId].id])
  await triggerFetchShowInstances(new Date());
};

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

const createShow = () => {
  showSelected.value = null;
  showCreateEditMode.value = true;
};

const goBack = async () => {
  selectedShowInstance.value = baseShowInstance();
  showCreateEditMode.value = false;
  showInstanceCreateEditMode.value = false;
  await triggerFetchShowInstances(new Date());
}

// TODO The timer may be moved inside the calendar
//  so reducing the network calls sent
//  That requires the handling of the context menu
//  and the show/instance id in a different way though
onActivated(async () => {
  await triggerFetchShowInstances(new Date());
  intervalId = setInterval(async () => {
    if (!isRunning.value) {
      await triggerFetchShowInstances(new Date());
    }
  }, 1000);
});

onDeactivated(() => {
  clearInterval(intervalId);
});
</script>

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