<script setup lang="ts">
import CalendarShowEvent from "@/components/content/partials/CalendarShowEvent.vue";
import {useRouter} from "vue-router";
import {ref} from "vue";
import {useAuthStore} from "@/stores/auth.store.ts";

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

const editMode = ref(false);

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

const router = useRouter();
const navigateToCreateShow = () => {
  // TODO Change route to correct one
  router.push({name: 'CreateShow'});
};
</script>

<template>
  <v-row class="ma-4 justify-space-around">
    <!--    TODO show only if user is Editor or admin-->
    <template v-if="userRole && (userRole == 'admin' || userRole == 'editor')">
      <v-btn color="primary" @click="navigateToCreateShow">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"/>
</template>

<style scoped>

</style>