<script setup>
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import interactionPlugin from "@fullcalendar/interaction";
import { ref, computed } from "vue";
import {} from "@fullcalendar/core";
const props = defineProps({
  modelValue: { type: Array, required: true },
  locale: { type: String, required: false, default: "th" },
  toolBarLeft: { type: String, required: false, default: "today prev,next" },
  toolBarCenter: { type: String, required: false, default: "title" },
  toolBarRight: { type: String, required: false, default: "timeGridDay,timeGridWeek,dayGridMonth" },
  height: { type: [String, Number], required: false, default: 1200 },
  selectViewDay: { type: String, required: false },
  mode: { type: String, required: true, default: "dayGridMonth" }
});
const emit = defineEmits(["select", "dialog"]);
const buttonText = computed(() => {
  return {
    today: props.locale === "th" ? "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49" : "today",
    month: props.locale === "th" ? "\u0E40\u0E14\u0E37\u0E2D\u0E19" : "month",
    week: props.locale === "th" ? "\u0E2A\u0E31\u0E1B\u0E14\u0E32\u0E2B\u0E4C" : "week",
    day: props.locale === "th" ? "\u0E27\u0E31\u0E19" : "day",
    list: props.locale === "th" ? "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23" : "list",
    year: props.locale === "th" ? "\u0E1B\u0E35" : "year"
  };
});
const calendarRef = ref();
const dateViewDay = ref({ date: "", props: {} });
const handleDateClick = (info) => {
  emit("select", info.event);
};
const handleEventClick = (info) => {
  emit("dialog", true);
  emit("select", info.event);
};
const eventContentDay = (arg) => {
  const list = document.createElement("div");
  list.innerHTML = document.getElementById(arg.event.id.toString())?.innerHTML || "";
  return { domNodes: [list] };
};
const calendarOptions = ref({
  plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
  initialView: props.mode,
  locale: props.locale,
  dayMaxEvents: true,
  timeZone: "UTC",
  headerToolbar: {
    left: props.toolBarLeft,
    center: props.toolBarCenter,
    right: props.toolBarRight
  },
  buttonText: buttonText.value,
  events: props.modelValue,
  initialDate: props.selectViewDay,
  dateClick: handleDateClick,
  eventClick: handleEventClick,
  nowIndicator: true,
  height: props.height,
  eventColor: "#378006"
});
</script>

<template>
  <FullCalendar
    ref="calendarRef"
    :options="calendarOptions"
  />
</template>
