#Resources

import {
  Calendar,
  Interaction,
  ResourceTimeGrid,
  ResourceTimeline,
  type EventInput,
  type ResourceInput,
} from 'z-cal/react'
import type { JSX } from 'react'
import { useScheme } from '../DemoFrame'
import { today, todayDate } from '../shared/dates'

const PLUGINS = [ResourceTimeGrid, ResourceTimeline, Interaction]

// Resources nest. Collapsed groups hide their children until expanded from the header.
const RESOURCES: ResourceInput[] = [
  { id: 'a', title: 'Room A' },
  {
    id: 'b',
    title: 'Room B',
    children: [
      { id: 'b1', title: 'Desk 1' },
      { id: 'b2', title: 'Desk 2' },
    ],
  },
  { id: 'c', title: 'Room C', expanded: false, children: [{ id: 'c1', title: 'Desk 3' }] },
]

// Events attach to a resource with `resourceId` (or several with `resourceIds`).
const EVENTS: EventInput[] = [
  { id: 1, resourceId: 'a', title: 'Team sync', start: today(0, 10), end: today(0, 11) },
  { id: 2, resourceId: 'b1', title: 'Conference', start: todayDate(1), end: todayDate(4) },
  { id: 3, resourceId: 'b2', title: 'Deadline', start: todayDate(-3), color: 'oklch(65% 0.2 30)' },
  { id: 4, resourceId: 'b1', title: 'Workshop', start: today(0, 13), end: today(0, 15) },
  { id: 5, resourceId: 'c1', title: 'Yoga', start: today(1, 7), end: today(1, 8) },
  { id: 6, resourceId: 'a', title: 'Onboarding', start: today(2, 9), end: today(2, 12) },
]

export function ResourcesDemo(): JSX.Element {
  return (
    <div className="card">
      <Calendar
        plugins={PLUGINS}
        view="resourceTimelineWeek"
        colorScheme={useScheme()}
        headerToolbar={{
          start: 'title',
          center: '',
          end: 'today prev,next resourceTimelineWeek,resourceTimeGridWeek,resourceTimeGridDay',
        }}
        buttonText={{
          resourceTimelineWeek: 'timeline',
          resourceTimeGridWeek: 'week',
          resourceTimeGridDay: 'day',
        }}
        resources={RESOURCES}
        events={EVENTS}
        editable
        nowIndicator
        scrollTime="08:00"
        height="560px"
      />
    </div>
  )
}