import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list'
import multiMonthPlugin from '@fullcalendar/multimonth'

document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById('pa-calendar')
  if (!el) return

  var events
  try { events = JSON.parse(el.dataset.events || '[]') } catch (_) { events = [] }

  var cal = new Calendar(el, {
    plugins: [dayGridPlugin, listPlugin, multiMonthPlugin],
    initialView: 'dayGridMonth',
    firstDay: 1,
    events: events,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,multiMonthYear,listYear'
    },
    views: {
      multiMonthYear: {
        // Dots keep the year grid readable when a day holds several deadlines.
        eventDisplay: 'list-item',
        multiMonthMinWidth: 260
      }
    },
    eventClick: function (info) {
      if (info.event.url) {
        info.jsEvent.preventDefault()
        window.location.href = info.event.url
      }
    },
    eventDidMount: function (info) {
      var parts = [info.event.title]
      var props = info.event.extendedProps || {}
      if (props.location) parts.push(props.location)
      info.el.title = parts.join(' — ')
    }
  })
  cal.render()
})