import { jsx, jsxs } from "react/jsx-runtime";
import { useCallback } from "react";
import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
import { Badge } from "../Badge/index.js";
import { SortableAccordionList } from "./SortableAccordionComp.js";
/* empty css                            */
function AccordionModern({
  draggable = false,
  expanded,
  setExpanded,
  isMultiExpanded = false,
  data = [],
  onChange,
  className = ""
}) {
  const handleMultiAccordionChange = useCallback(
    (value) => {
      if (onChange) {
        onChange(value);
      }
      const expandedArr = Array.isArray(expanded) ? expanded : [];
      if (isMultiExpanded) {
        if (!expandedArr.includes(value)) {
          setExpanded([...expandedArr, value]);
        } else {
          setExpanded(expandedArr.filter((v) => v !== value));
        }
      } else if (expanded === value) {
        setExpanded("");
      } else {
        setExpanded(value);
      }
    },
    [expanded, isMultiExpanded, onChange, setExpanded]
  );
  const checkExpand = useCallback(
    (item) => {
      if (isMultiExpanded && Array.isArray(expanded) && expanded.includes(item.value)) {
        return "expand-content";
      }
      if (expanded === item.value) {
        return "expand-content";
      }
      return "";
    },
    [expanded, isMultiExpanded]
  );
  if (draggable && data.length > 0) {
    return /* @__PURE__ */ jsx(
      SortableAccordionList,
      {
        checkExpand,
        data,
        handleMultiAccordionChange
      }
    );
  }
  return /* @__PURE__ */ jsx("div", { className: `impact-accordion-modern-main-container ${className}`.trim(), children: data.map((item) => /* @__PURE__ */ jsx(
    "div",
    {
      className: `impact-modern-accordion-container ${item.disabled ? "disabled" : ""}`,
      children: /* @__PURE__ */ jsxs(
        "div",
        {
          "aria-controls": `${item.value}-content`,
          "aria-disabled": item.disabled,
          "aria-expanded": checkExpand(item) === "expand-content",
          className: "impact-modern-accordion-item",
          id: `${item.value}-header`,
          role: "button",
          tabIndex: item.disabled ? -1 : 0,
          onClick: () => !item.disabled && handleMultiAccordionChange(item.value),
          onKeyDown: (e) => {
            if (!item.disabled && (e.key === "Enter" || e.key === " ")) {
              e.preventDefault();
              handleMultiAccordionChange(item.value);
            }
          },
          children: [
            /* @__PURE__ */ jsxs("div", { className: "impact-modern-accordion-header", children: [
              /* @__PURE__ */ jsx(
                "div",
                {
                  "aria-hidden": true,
                  className: `impact-modern-accordion-expand-icon ${checkExpand(item)}-icon`,
                  children: /* @__PURE__ */ jsx(default_1, {})
                }
              ),
              /* @__PURE__ */ jsxs(
                "div",
                {
                  className: `impact-modern-accordion-title ${(item.childCount ?? 0) > 0 ? "child-count" : ""} ${item.disabled ? "disabled" : ""}`,
                  children: [
                    item.header,
                    (item.childCount ?? 0) > 0 ? /* @__PURE__ */ jsx(Badge, { color: "info", label: String(item.childCount), variant: "stroke" }) : null
                  ]
                }
              )
            ] }),
            /* @__PURE__ */ jsx(
              "div",
              {
                "aria-labelledby": `${item.value}-header`,
                className: `impact-modern-accordion-content ${checkExpand(item)}`,
                id: `${item.value}-content`,
                role: "region",
                children: item.content
              }
            )
          ]
        }
      )
    },
    item.value
  )) });
}
AccordionModern.displayName = "AccordionModern";
export {
  AccordionModern
};
