sokko-g/website/src/features/toolboxes/modules/CalendarContent.jsx

// Rôle : rend le contenu interactif du calendrier une fois initialisé.
import { Icon } from "../../../components/Icon.jsx";
import { CalendarEventForm } from "./CalendarEventForm.jsx";
import { CalendarMonthView, CalendarWeekGrid } from "./CalendarViews.jsx";
import { TextExchangeActions } from "./TextExchangeActions.jsx";
import {
  addMonths,
  formatLocalDateKey,
  getMonthStart,
  minutesToTimeValue
} from "./calendarUtils.js";

export function CalendarContent({
  data,
  context,
  draft,
  error,
  activeOccurrenceDate,
  monthStart,
  monthGridDays,
  occurrences,
  textContent,
  activeEventId,
  formOpen,
  draftSelection,
  selection,
  monthSelection,
  days,
  weekGridLayout,
  now,
  nowDayIndex,
  nowMinutes,
  hideEmptyHours,
  textExchangeOpen,
  onKeyDown,
  onSubmit,
  onDraftChange,
  onAlertModeChange,
  onAlertOffsetToggle,
  onDeleteEvent,
  onDeleteOccurrence,
  onClose,
  onDisplayedMonthChange,
  onImport,
  onHideEmptyHoursToggle,
  onMonthPointerDown,
  onMonthPointerEnter,
  onMonthPointerUp,
  onSlotPointerDown,
  onSlotPointerEnter,
  onSlotPointerUp,
  onEditEvent
}) {
  const selectedAlertOffsets = draft.alertMode === "off" ? [] : draft.alertOffsetMinutes;

  return (
    <div className="calendar-module" onKeyDown={onKeyDown}>
      {formOpen && (
        <CalendarEventForm
          data={data}
          draft={draft}
          error={error}
          activeOccurrenceDate={activeOccurrenceDate}
          monthStart={monthStart}
          selectedAlertOffsets={selectedAlertOffsets}
          textContent={textContent}
          onSubmit={onSubmit}
          onDraftChange={onDraftChange}
          onAlertModeChange={onAlertModeChange}
          onAlertOffsetToggle={onAlertOffsetToggle}
          onDeleteEvent={onDeleteEvent}
          onDeleteOccurrence={onDeleteOccurrence}
          onClose={onClose}
          onDisplayedMonthChange={onDisplayedMonthChange}
        />
      )}
      {textExchangeOpen && (
        <div className="module-text-exchange-panel">
          <TextExchangeActions type="calendar" data={data} context={context} textContent={textContent} onImport={onImport} />
        </div>
      )}

      {data.viewMode === "week" && (
        <CalendarWeekOptions textContent={textContent} hideEmptyHours={hideEmptyHours} onToggle={onHideEmptyHoursToggle} />
      )}

      {data.viewMode === "month" ? (
        <CalendarMonthView
          monthStart={monthStart}
          monthGridDays={monthGridDays}
          occurrences={occurrences}
          textContent={textContent}
          activeEventId={activeEventId}
          selectedRange={formOpen ? { startDate: draft.startDate, endDate: draft.endDate || draft.startDate } : null}
          dragSelection={monthSelection}
          todayDate={formatLocalDateKey(now)}
          nowLabel={minutesToTimeValue(nowMinutes)}
          onPreviousMonth={() => onDisplayedMonthChange(getMonthStart(addMonths(monthStart, -1)))}
          onCurrentMonth={() => onDisplayedMonthChange(getMonthStart(new Date()))}
          onNextMonth={() => onDisplayedMonthChange(getMonthStart(addMonths(monthStart, 1)))}
          onPointerDown={onMonthPointerDown}
          onPointerEnter={onMonthPointerEnter}
          onPointerUp={onMonthPointerUp}
          onEditEvent={onEditEvent}
        />
      ) : (
        <CalendarWeekGrid
          days={days}
          occurrences={occurrences}
          textContent={textContent}
          activeEventId={activeEventId}
          formOpen={formOpen}
          draftSelection={draftSelection}
          selection={selection}
          weekGridLayout={weekGridLayout}
          nowDayIndex={nowDayIndex}
          nowMinutes={nowMinutes}
          onSlotPointerDown={onSlotPointerDown}
          onSlotPointerEnter={onSlotPointerEnter}
          onSlotPointerUp={onSlotPointerUp}
          onEditEvent={onEditEvent}
        />
      )}
    </div>
  );
}

function CalendarWeekOptions({ textContent, hideEmptyHours, onToggle }) {
  return (
    <div className="calendar-week-options">
      <span>{textContent.hideEmptyHoursLabel || "Masquer les heures vides"}</span>
      <button
        className={`tool-split-scroll-toggle calendar-hide-hours-switch nds-switch ${hideEmptyHours ? "active" : ""}`}
        data-size="md"
        type="button"
        onClick={onToggle}
        aria-pressed={hideEmptyHours}
        title={textContent.hideEmptyHoursLabel || "Masquer les heures vides"}
      >
        <Icon name={hideEmptyHours ? "eye-closed" : "eye-open"} />
        <i aria-hidden="true" />
      </button>
    </div>
  );
}