Customization

'use client'

import type {
  CalendarClassNames,
  CalendarEventInputBase,
  EventRenderArgs,
} from '@hapio/calendar-react'

import { CalendarEventTime, EVENT_TITLE_CLASS } from '@/components/hapio-calendar/calendar-event'
import { HapioCalendar } from '@/components/hapio-calendar/hapio-calendar'
import type { Booking } from '@/lib/bookings'

const STATUS: Readonly<Record<Booking['status'], string | null>> = {
  confirmed: null,
  tentative: 'Tentative',
  canceled: 'Canceled',
}

/** The default content, with the status in the name for screen readers ("Canceled: …"). */
function renderBooking({ event, title, timeText, Default }: EventRenderArgs<Booking>) {
  const status = STATUS[event.data.status]
  if (status === null) return <Default />
  return (
    <>
      <CalendarEventTime />
      {timeText === '' ? null : ' '}
      {/* The title part's slot, direction and classes, as `CalendarEventTitle` renders them. */}
      <span data-slot="calendar-event-title" dir="auto" className={EVENT_TITLE_CLASS}>
        <span className="sr-only">{status}: </span>
        {title}
      </span>
    </>
  )
}

/** Classes per part: a string, or a function of the part's state. */
const classNames: CalendarClassNames<Booking> = {
  event: ({ event }) => event.data.status === 'canceled' && 'line-through opacity-70',
  dayLane: ({ isToday }) => isToday && 'bg-primary/5',
  moreLink: 'font-semibold',
}

function toCalendarEvent(booking: Booking): CalendarEventInputBase {
  return { id: booking.id, title: booking.title, start: booking.startsAt, end: booking.endsAt }
}

export function StyledBookings({ bookings }: { bookings: readonly Booking[] }) {
  return (
    <HapioCalendar
      eventItems={bookings}
      eventAccessor={toCalendarEvent}
      renderEvent={renderBooking}
      classNames={classNames}
      timeZone="Europe/Stockholm"
      className="h-[36rem]"
    />
  )
}

'use client'

import {
  CalendarProvider,
  createCalendarKit,
  defineViews,
  list,
  useAnnouncer,
  useDescriptions,
  type CalendarEventInputBase,
  type ListSegment,
} from '@hapio/calendar-react'

import type { Booking } from '@/lib/bookings'

const views = defineViews({ week: list({ unit: 'week' }), month: list({ unit: 'month' }) })

// Hooks typed for bookings and these views: module scope, once.
const kit = createCalendarKit<Booking>()(views)

function toCalendarEvent(booking: Booking): CalendarEventInputBase {
  return { id: booking.id, title: booking.title, start: booking.startsAt, end: booking.endsAt }
}

export function BookingsAgenda({ bookings }: { bookings: readonly Booking[] }) {
  const calendar = kit.useCalendar({
    eventItems: bookings,
    eventAccessor: toCalendarEvent,
    timeZone: 'Europe/Stockholm',
  })
  return (
    <CalendarProvider value={calendar}>
      <div {...calendar.getRootProps({ className: 'agenda' })}>
        <Toolbar />
        {calendar.model.status === 'ready' ? <Agenda /> : <p>Loading…</p>}
        <Descriptions />
        <LiveRegion />
      </div>
    </CalendarProvider>
  )
}

function Toolbar() {
  const toolbar = kit.useToolbar()
  return (
    <div className="agenda-toolbar">
      <button {...toolbar.getPrevButtonProps()}>{toolbar.prevLabel}</button>
      <h2 {...toolbar.getTitleProps()}>{toolbar.title}</h2>
      <button {...toolbar.getNextButtonProps()}>{toolbar.nextLabel}</button>
      <button {...toolbar.getTodayButtonProps()}>{toolbar.todayText}</button>
      <div {...toolbar.getViewSwitcherProps()}>
        {toolbar.views.map((view) => (
          <button key={view.name} {...toolbar.getViewOptionProps(view.name)}>
            {view.label}
          </button>
        ))}
      </div>
    </div>
  )
}

function Agenda() {
  const agenda = kit.useList()
  if (agenda.isEmpty) return <div {...agenda.getEmptyProps()}>{agenda.emptyText}</div>
  return (
    <ul {...agenda.getListProps()}>
      {agenda.days.map((day) => (
        <li key={day.key} {...agenda.getDayProps(day)}>
          <h3 {...agenda.getDayHeadingProps(day)}>
            {day.heading} <small>{day.headingAlt}</small>
          </h3>
          <ul {...agenda.getDayListProps(day)}>
            {day.segments.map((segment) => (
              <li key={segment.key} {...agenda.getItemProps(segment)}>
                <AgendaEvent segment={segment} />
              </li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  )
}

function AgendaEvent({ segment }: { segment: ListSegment<Booking> }) {
  const event = kit.useCalendarEvent(segment)
  const content = (
    <>
      <span className="agenda-time">{event.content.timeText}</span> {event.content.title}
    </>
  )
  // A link for an event with `href`, else a button: the hook says which.
  return event.as === 'a' ? (
    <a {...event.getRootProps()}>{content}</a>
  ) : (
    <button {...event.getRootProps()}>{content}</button>
  )
}

/** Each event's description, referenced by its `aria-describedby`. */
function Descriptions() {
  const descriptions = useDescriptions()
  return (
    <div {...descriptions.getContainerProps()}>
      {descriptions.items.map((item) => (
        <span key={item.id} id={item.id}>
          {item.text}
        </span>
      ))}
    </div>
  )
}

/** Announcements (navigation, selections, edits): visually hidden, never `display: none`. */
function LiveRegion() {
  const announcer = useAnnouncer()
  return <div {...announcer.getLiveRegionProps({ className: 'sr-only' })}>{announcer.message}</div>
}