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

// Rôle : regroupe les switches, alertes et choix de couleur du formulaire calendrier.
import { Icon } from "../../../components/Icon.jsx";
import {
  CALENDAR_ALERT_OFFSETS,
  CALENDAR_COLORS,
  CALENDAR_COLOR_VALUES
} from "./calendarUtils.js";
import { ALERT_MODES } from "./timerOptions.js";

export function MonthlyRepeatSwitch({ value, textContent, onChange }) {
  const options = [
    { value: "monthDay", icon: "day-number", label: textContent.monthlyRepeatMonthDay || "Numéro du jour" },
    { value: "weekday", icon: "day-name", label: textContent.monthlyRepeatWeekday || "Jour de semaine" }
  ];

  return (
    <div className="layout-switch calendar-month-repeat-switch nds-radio-button-group" data-size="sm" role="group" aria-label={textContent.monthlyRepeatLabel || "Règle mensuelle"}>
      {options.map((option) => (
        <button
          key={option.value}
          className={value === option.value ? "active" : ""}
          type="button"
          onClick={() => onChange(option.value)}
          aria-pressed={value === option.value}
          aria-label={option.label}
          title={option.label}
        >
          <Icon name={option.icon} />
        </button>
      ))}
    </div>
  );
}

export function MonthEventRepeatSwitch({ value, monthlyRepeatBy, textContent, onChange }) {
  const options = [
    { value: "none", icon: "close", label: textContent.repeatNone || "Aucune" },
    { value: "weekly", icon: "calendar-week", label: textContent.repeatWeekly || "Chaque semaine", disabled: monthlyRepeatBy === "monthDay" },
    { value: "monthly", icon: "calendar-month", label: textContent.repeatMonthly || "Chaque mois" }
  ];
  const safeValue = monthlyRepeatBy === "monthDay" && value === "weekly" ? "none" : value;

  return (
    <div className="calendar-month-event-repeat-switch nds-radio-button-group" data-size="sm" role="group" aria-label={textContent.repeatLabel || "Répétition"}>
      {options.map((option) => (
        <button
          key={option.value}
          className={safeValue === option.value ? "active" : ""}
          type="button"
          disabled={option.disabled}
          onClick={() => onChange(option.value)}
          aria-pressed={safeValue === option.value}
          aria-label={option.label}
          title={option.label}
        >
          <Icon name={option.icon} />
        </button>
      ))}
    </div>
  );
}

export function CalendarAlertOffsets({ selectedOffsets, textContent, onToggle }) {
  const labels = {
    10: textContent.alertOffset10 || "10 min avant",
    5: textContent.alertOffset5 || "5 min avant",
    0: textContent.alertOffset0 || "Au début"
  };

  return (
    <fieldset className="calendar-alert-offsets">
      <legend>{textContent.alertOffsetLabel || "Alerte"}</legend>
      {CALENDAR_ALERT_OFFSETS.map((offset) => (
        <label key={offset}>
          <input className="nds-checkbox" data-size="sm" type="checkbox" checked={selectedOffsets.includes(offset)} onChange={() => onToggle(offset)} />
          <span>{labels[offset]}</span>
        </label>
      ))}
    </fieldset>
  );
}

export function CalendarColorPicker({ value, textContent, onChange }) {
  const label = textContent.colorLabel || "Couleur";
  return (
    <div className="calendar-color-picker notepad-color-dropdown">
      <span>{label}</span>
      <button
        className="calendar-color-toggle notepad-color-toggle nds-swatch"
        type="button"
        title={label}
        aria-label={label}
        style={{ "--swatch-color": CALENDAR_COLOR_VALUES[value] || CALENDAR_COLOR_VALUES.violet }}
      />
      <div className="calendar-color-menu notepad-color-menu" role="menu" aria-label={label}>
        {CALENDAR_COLORS.map((color) => (
          <button
            key={color}
            className={`notepad-swatch nds-swatch ${value === color ? "active" : ""}`}
            type="button"
            title={textContent[`color${color.charAt(0).toUpperCase()}${color.slice(1)}`] || color}
            aria-label={textContent[`color${color.charAt(0).toUpperCase()}${color.slice(1)}`] || color}
            aria-pressed={value === color}
            style={{ "--swatch-color": CALENDAR_COLOR_VALUES[color] }}
            onClick={() => onChange(color)}
          />
        ))}
      </div>
    </div>
  );
}

export function CalendarAlertModeSwitch({ mode, textContent, onChange }) {
  const labels = {
    off: textContent.alertOffTitle || "Pas d'alerte",
    visible: textContent.alertVisibleTitle || "Alerte quand la toolbox est affichée",
    site: textContent.alertSiteTitle || "Alerte sur tout le site"
  };

  return (
    <div className="timer-alert-mode-switch calendar-alert-mode-switch nds-radio-button-group" data-size="xs" role="group" aria-label={textContent.alertModeTitle || "Mode d'alerte"}>
      {ALERT_MODES.map((option) => (
        <button
          key={option.mode}
          className={`timer-alert-mode-button ${mode === option.mode ? "active" : ""}`}
          type="button"
          onClick={() => onChange(option.mode)}
          aria-pressed={mode === option.mode}
          aria-label={labels[option.mode]}
          title={labels[option.mode]}
        >
          <Icon name={option.icon} />
        </button>
      ))}
    </div>
  );
}