<script setup>
import {ref, computed, onMounted, watch} from 'vue'
import { onClickLogout, onClickLogin, isAuthenticated, user, checkUserAuthentication, calendarOperations, addNewBooking} from "@/components/displays/buttons/microsoft/MicrosoftAuthentication.vue";

checkUserAuthentication();

const events = ref([]);

function getEvents() {
  calendarOperations.getEvents().then((response) => {
    console.log(response);
    events.value = response;
  });
}

// When the element is mounted, get the events
onMounted(() => {
  if (isAuthenticated.value) {
    getEvents();
  }
});

watch(isAuthenticated, (newValue) => {
  if (newValue) {
    getEvents();
  }
});
</script>

<template>
  <div class="box">
    <div class="content">
      <h2>Microsoft Authentication</h2>
      <p v-if="!isAuthenticated">Du er ikke logget ind</p>
      <p v-else-if="isAuthenticated">Du er logget ind som {{ user.name }}</p>
      <template v-if="isAuthenticated">
        <!-- Get the calendars -->
         {{ events }}
      </template>
      {{user}}
      <div class="buttons">
        <button class="button is-primary" @click="onClickLogin">
          <span class="icon is-small">
            <i class="fab fa-microsoft"></i>
          </span>
          <span>Log ind med Microsoft</span>
        </button>
        <button class="button is-danger" @click="onClickLogout">
          <span class="icon is-small">
            <i class="fas fa-sign-out-alt"></i>
          </span>
          <span>Log ud</span>
        </button>
        <!-- Add an event -->
        <button class="button is-info" @click="addNewBooking">
          <span class="icon is-small">
            <i class="fas fa-plus"></i>
          </span>
          <span>Opret begivenhed</span>
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>