<template>
	<section class="relative pt-16 pb-32 flex content-center items-center justify-center">
		<div class="container mx-auto px-1 lg:px-4">
			<div class="flex flex-wrap justify-end text-center">
				<Breadcrumbs :currentPage="currentRouteName" />
			</div>
      <div class="flex flex-wrap justify-center text-center mb-12 pt-8">
				<div class="w-full lg:w-6/12 px-4">
					<h2 class="text-4xl font-semibold">TIMETABLE</h2>
					<p class="text-lg leading-relaxed m-4 text-medium-grey">
						reservation priority
					</p>
				</div>
			</div>

			<div class="flex flex-wrap items-center mt-16">
				<div class="w-full md:w-12/12 px-4 mr-auto ml-auto">
					<div class='demo-app'>
					<div class='demo-app-main'>
					<FullCalendar
						class='demo-app-calendar'
						:options='calendarOptions'
					>
						<template v-slot:eventContent='arg'>
						<b>{{ arg.timeText }}</b>
						<i>{{ arg.event.title }}</i>
						</template>
					</FullCalendar>
				</div>
				</div>
			</div>
			</div>
		</div>
	</section>
</template>

<script>
import FullCalendar, { CalendarOptions, EventApi, DateSelectArg, EventClickArg } from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from '@/services/utils/calendar-utils'


import UserService from "@/services/user.service";
import Breadcrumbs from "@/components/utils/Breadcrumbs.vue";
import AOS from "aos";
import { mapState } from "vuex";

export default {
  name: "TimeTable",
  data() {
    return {
	  content: "",
	  calendarId: 0,

	  calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin // needed for dateClick
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'timeGridWeek',
        initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents
        /* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },
      currentEvents: []
    };
  },
//   computed: {
//     ...mapState(["isRTL"]),
//   },
  mounted() {
	  AOS.init();
	  this.$nextTick(function () {
      window.scrollTo(0, 0);
		  // this.$refs.target?.scrollIntoView();
	  });
    UserService.getPublicContent().then(
      (response) => {
        this.content = response.data;
      },
      (error) => {
        this.content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
	);
  },
  methods: {
	handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
    },
    handleDateSelect(selectInfo) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar
      calendarApi.unselect() // clear date selection
      if (title) {
        calendarApi.addEvent({
          id: calendarId++,
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    },
    handleEventClick(clickInfo) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },
    handleEvents(events) {
      this.currentEvents = events
    }
  },
  components: {
	Breadcrumbs,
	FullCalendar
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),

    currentRouteName() {
      	return this.$route.path.substring(1);
    },
  },

};
</script>

<style lang='css'>
	.demo-app {
	  display: flex;
	  min-height: 100%;
	  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	  font-size: 14px;
	}
	.demo-app-main {
	  flex-grow: 1;
	  /* padding: 3em; */
	}
	.fc { /* the calendar root */
	  max-width: 1100px;
	  margin: 0 auto;
	}
	/* .demo-app-sidebar {
	  width: 300px;
	  line-height: 1.5;
	  background: #eaf9ff;
	  border-right: 1px solid #d3e2e8;
	}
	.demo-app-sidebar-section {
	  padding: 2em;
	} */
</style>
