import classNames from "classnames";
import React, { useContext } from "react";
import { RicosContext } from "./../../ricos-context/index.js";
import { COLLAPSIBLE_LIST_ITEM, EXPAND_BUTTON } from "../data-hooks.js";
import { ArrowIcon } from "../icons/index.js";
import iconStyles from "../statics/styles/collapsible-list-component-scss.js";
import classes from "../statics/styles/collapsible-list-pair-scss.js";
import { CollapsibleListContext } from "./collapsible-list-context.js";
const CollapsibleListItem = ({ node, RicosNodesRenderer }) => {
  const { isExpanded: isItemExpanded, toggle } = useContext(CollapsibleListContext);
  const { tabIndex } = useContext(RicosContext);
  const isExpanded = isItemExpanded(node.id);
  if (!node.nodes || node.nodes.length === 0) {
    return null;
  }
  const [firstChild, ...restOfChildren] = node.nodes ?? [];
  const bodyId = `collapsible-list-body-${node.id}`;
  const handleKeyDown = (event) => {
    if (event.key === " ") {
      event.preventDefault();
    }
  };
  const handleKeyUp = (event) => {
    if (event.key === " " || event.key === "Enter") {
      toggle(node.id);
    }
  };
  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { "data-hook": `${COLLAPSIBLE_LIST_ITEM} ${isExpanded ? "expanded" : "collapsed"}` }, /* @__PURE__ */ React.createElement("div", { className: classNames(classes.itemContainer, classes.itemContainerViewer) }, /* @__PURE__ */ React.createElement("div", { className: classes.item }, /* @__PURE__ */ React.createElement(
    "div",
    {
      className: classNames(classes.itemHeader, "has-custom-focus"),
      role: "button",
      tabIndex,
      onClick: () => toggle(node.id),
      onKeyDown: handleKeyDown,
      onKeyUp: handleKeyUp,
      "aria-expanded": isExpanded,
      "aria-controls": bodyId
    },
    /* @__PURE__ */ React.createElement("div", { className: classes.expandIcon }, /* @__PURE__ */ React.createElement(
      "div",
      {
        className: iconStyles.iconContainer,
        "data-hook": EXPAND_BUTTON,
        "aria-hidden": "true"
      },
      /* @__PURE__ */ React.createElement(
        ArrowIcon,
        {
          className: classNames(iconStyles.icon, {
            [iconStyles.isExpanded]: isExpanded
          })
        }
      )
    )),
    /* @__PURE__ */ React.createElement("div", { className: classes.item }, /* @__PURE__ */ React.createElement(RicosNodesRenderer, { nodes: [firstChild] }))
  ), /* @__PURE__ */ React.createElement(
    "div",
    {
      id: bodyId,
      className: classNames(
        classes.itemBody,
        isExpanded ? void 0 : classes.childrenHidden
      )
    },
    /* @__PURE__ */ React.createElement("div", { className: classes.expandIconPlaceholder }),
    /* @__PURE__ */ React.createElement("div", { className: classes.item }, /* @__PURE__ */ React.createElement(RicosNodesRenderer, { nodes: restOfChildren }))
  )))));
};
const CollapsibleListItemRenderer = ({ node, ...props }) => {
  return /* @__PURE__ */ React.createElement(CollapsibleListItem, { key: node.id, node, ...props });
};
var collapsible_list_item_default = CollapsibleListItemRenderer;
export {
  collapsible_list_item_default as default
};
//# sourceMappingURL=collapsible-list-item.js.map
