import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { forwardRef, useId } from "react";
import { S as StCheck } from "../../StCheck-DWjoYM69.js";
import { c as cn } from "../../cn-FAaWYZ6x.js";
const ChecklistItemButton = forwardRef(({ label, description, checked, disabled, onClick }, ref) => {
  const uniqueId = useId();
  const descriptionId = description ? `${uniqueId}-description` : void 0;
  return /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-3 py-2", children: [
    /* @__PURE__ */ jsx(
      "button",
      {
        ref,
        type: "button",
        onClick,
        disabled,
        "aria-describedby": descriptionId,
        "aria-label": `${checked ? "Uncheck" : "Check"} ${label}`,
        className: cn(
          "flex items-center justify-center rounded-full w-5 h-5 border-2 transition-all duration-200 flex-shrink-0 mt-0.5",
          "focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2",
          checked ? "bg-accent border-accent text-white" : "border-gray-300 hover:border-gray-400 bg-white",
          disabled && "opacity-50 cursor-not-allowed"
        ),
        children: checked && /* @__PURE__ */ jsx(StCheck, { width: 12, height: 12 })
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
      /* @__PURE__ */ jsx(
        "label",
        {
          htmlFor: uniqueId,
          className: cn(
            "block font-medium text-strong cursor-pointer",
            disabled && "cursor-not-allowed opacity-50"
          ),
          onClick: disabled ? void 0 : onClick,
          children: label
        }
      ),
      description && /* @__PURE__ */ jsx(
        "p",
        {
          id: descriptionId,
          className: cn("text-base   mt-1", disabled && "opacity-50"),
          children: description
        }
      )
    ] })
  ] });
});
ChecklistItemButton.displayName = "ChecklistItemButton";
const SelectAllButton = forwardRef(({ label, checked, indeterminate, disabled, onClick }, ref) => {
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 py-2", children: [
    /* @__PURE__ */ jsx(
      "button",
      {
        ref,
        type: "button",
        onClick,
        disabled,
        "aria-label": checked ? `Unselect all - ${label}` : `Select all - ${label}`,
        className: cn(
          "flex items-center justify-center rounded-full w-5 h-5 border-2 transition-all duration-200 flex-shrink-0",
          "focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2",
          checked || indeterminate ? "bg-accent border-accent text-white" : "border-gray-300 hover:border-gray-400 bg-white",
          disabled && "opacity-50 cursor-not-allowed"
        ),
        children: indeterminate ? /* @__PURE__ */ jsx(
          StCheck,
          {
            width: 12,
            height: 12,
            style: { transform: "rotate(45deg)" }
          }
        ) : checked ? /* @__PURE__ */ jsx(StCheck, { width: 12, height: 12 }) : null
      }
    ),
    /* @__PURE__ */ jsx(
      "label",
      {
        className: cn(
          "block font-medium text-strong cursor-pointer flex-1",
          disabled && "cursor-not-allowed opacity-50"
        ),
        onClick: disabled ? void 0 : onClick,
        children: label
      }
    )
  ] });
});
SelectAllButton.displayName = "SelectAllButton";
const Checklist = forwardRef(
  ({
    className,
    items,
    onItemChange,
    onSelectAll,
    showSelectAll = false,
    selectAllLabel = "Select all",
    disabled = false,
    ...props
  }, ref) => {
    const checkedItems = items.filter((item) => item.checked && !item.disabled);
    const enabledItems = items.filter((item) => !item.disabled);
    const allChecked = enabledItems.length > 0 && checkedItems.length === enabledItems.length;
    const someChecked = checkedItems.length > 0 && checkedItems.length < enabledItems.length;
    const handleSelectAll = () => {
      if (allChecked) {
        onSelectAll?.(false);
      } else {
        onSelectAll?.(true);
      }
    };
    const handleItemChange = (itemId, currentChecked) => () => {
      onItemChange?.(itemId, !currentChecked);
    };
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        className: cn("space-y-1", className),
        role: "group",
        "aria-label": "Checklist",
        ...props,
        children: [
          showSelectAll && enabledItems.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              SelectAllButton,
              {
                label: selectAllLabel,
                checked: allChecked,
                indeterminate: someChecked,
                disabled: disabled || enabledItems.length === 0,
                onClick: handleSelectAll
              }
            ),
            /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200 my-3" })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: items.map((item) => /* @__PURE__ */ jsx(
            ChecklistItemButton,
            {
              label: item.label,
              description: item.description,
              checked: item.checked || false,
              disabled: disabled || item.disabled || false,
              onClick: handleItemChange(item.id, item.checked || false)
            },
            item.id
          )) })
        ]
      }
    );
  }
);
Checklist.displayName = "Checklist";
export {
  Checklist
};
