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,
        // The view hardcodes dayMaxEvents to "fit the cell", so the only way to
        // show more than one deadline per day is to make the weeks taller. Month
        // table height is width / aspectRatio over six rows: at three columns
        // that leaves ~50px a week, enough for the day number plus the two
        // deadlines a day carries when an abstract and a paper share a date.
        aspectRatio: 1.1,
        // A day cell in the year grid is ~50px wide, so the full
        // "OSDI — abstract deadline" title only ever renders as a cropped
        // fragment. Keep the venue, which is the part that identifies the dot,
        // and leave the rest to the hover text and the month and list views.
        eventContent: function (arg) {
          var dot = document.createElement('div')
          dot.className = 'fc-daygrid-event-dot'
          dot.style.borderColor = arg.borderColor || arg.backgroundColor
          var title = document.createElement('div')
          title.className = 'fc-event-title'
          title.textContent = arg.event.title.split(' — ')[0]
          return { domNodes: [dot, title] }
        }
      }
    },
    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()
})