import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useId, useMemo } from 'react';
import { F as FieldLabel } from './FieldLabel-1g9Y_K44.js';
import { B as ButtonToggle } from './ButtonToggle-DaFQ3DBG.js';
import { T as Tooltip } from './Tooltip-BboNo2-B.js';
import { F as Flex } from './Flex-WyyZm1bf.js';
import { H as Helper } from './Helper-B_FIOlhy.js';

import './DaysOfTheWeek.css';const styles = {
	"days-of-the-week-container": "_days-of-the-week-container_13rkh_3",
	"days-of-the-week": "_days-of-the-week_13rkh_3",
	"button-toggle": "_button-toggle_13rkh_18",
	"button-toggle-wrapper": "_button-toggle-wrapper_13rkh_24"
};

const DAYS = [
  { short: "Mo", full: "Monday" },
  { short: "Tu", full: "Tuesday" },
  { short: "We", full: "Wednesday" },
  { short: "Th", full: "Thursday" },
  { short: "Fr", full: "Friday" },
  { short: "Sa", full: "Saturday" },
  { short: "Su", full: "Sunday" }
];
const DaysOfTheWeek = forwardRef(
  (props, ref) => {
    const {
      selectedDays = [],
      onChange,
      disabled,
      firstDay = 7,
      hint,
      id: idProp,
      description,
      error,
      warning,
      errorMessage,
      errorAriaLive,
      label,
      required,
      moreInfo,
      labelProps
    } = props;
    const autoId = useId();
    const id = idProp ?? autoId;
    const labelUid = useId();
    const helperUid = useId();
    const hasHelperText = hint || error || warning || errorMessage || description;
    const orderedDays = useMemo(() => {
      const firstDayIndex = firstDay - 1;
      return [...DAYS.slice(firstDayIndex), ...DAYS.slice(0, firstDayIndex)];
    }, [firstDay]);
    const handleDayToggle = (index) => {
      const dayNumber = (index + firstDay - 1) % 7 + 1;
      const newSelectedDays = selectedDays.includes(dayNumber) ? selectedDays.filter((d) => d !== dayNumber) : [...selectedDays, dayNumber];
      onChange?.(newSelectedDays);
    };
    const isDayDisabled = (dayNumber) => {
      if (typeof disabled === "boolean") {
        return disabled;
      }
      if (Array.isArray(disabled)) {
        return disabled.includes(dayNumber);
      }
      return false;
    };
    return /* @__PURE__ */ jsxs("div", { className: styles["days-of-the-week-container"], children: [
      label ? /* @__PURE__ */ jsx(
        FieldLabel,
        {
          moreInfo,
          required,
          id: labelUid,
          htmlFor: id,
          ...labelProps,
          children: label
        }
      ) : null,
      /* @__PURE__ */ jsx(Flex, { ref, gap: 2, className: styles["days-of-the-week"], id, children: orderedDays.map((day, index) => {
        const dayNumber = (index + firstDay - 1) % 7 + 1;
        return /* @__PURE__ */ jsxs(Tooltip, { placement: "top", children: [
          /* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles["button-toggle-wrapper"], children: /* @__PURE__ */ jsx(
            ButtonToggle,
            {
              checked: selectedDays.includes(dayNumber),
              onClick: () => handleDayToggle(index),
              disabled: isDayDisabled(dayNumber),
              className: styles["button-toggle"],
              id: label ? labelUid : void 0,
              "aria-describedby": hasHelperText ? helperUid : void 0,
              children: day.short
            }
          ) }),
          /* @__PURE__ */ jsx(Tooltip.Content, { children: day.full })
        ] }, day.short);
      }) }),
      hasHelperText ? /* @__PURE__ */ jsx(
        Helper,
        {
          id: helperUid,
          hint,
          description,
          error,
          warning,
          errorMessage,
          errorAriaLive
        }
      ) : null
    ] });
  }
);
DaysOfTheWeek.displayName = "DaysOfTheWeek";

export { DaysOfTheWeek as D };
//# sourceMappingURL=DaysOfTheWeek-CBsjDoih.js.map
