import { u as useRecordVisibilityChanges, j as jsxRuntimeExports } from "./doenetml-cB_aZGJ5.js";
import React__default, { useRef } from "react";
import { F as FontAwesomeIcon } from "./index.es-DKppzeUo.js";
import { f as faCaretDown, a as faCaretRight } from "./index-D_-RBdRX.js";
import { u as useDoenetRenderer } from "./useDoenetRenderer-DN3Z9CW3.js";
import { a as addCommasForCompositeRanges } from "./composites-DgtFnuE1.js";
import { c as calculateValidationState, a as createCheckWorkComponent } from "./checkWork-D9syAFsW.js";
const section = React__default.memo(function Section(props) {
  let { id, SVs, children, actions, callAction } = useDoenetRenderer(props);
  const ref = useRef(null);
  useRecordVisibilityChanges(ref, callAction, actions);
  if (SVs.hidden) {
    return null;
  }
  const submitAllAnswers = () => callAction({
    action: actions.submitAllAnswers
  });
  let title;
  let removedChildInd = null;
  if (SVs.titleChildName) {
    for (let [ind, child] of children.entries()) {
      if (child?.props?.componentInstructions.componentIdx === SVs.titleChildName) {
        title = children[ind];
        children.splice(ind, 1);
        removedChildInd = ind;
        break;
      }
    }
  }
  if (title) {
    title = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
      SVs.titlePrefix,
      title
    ] });
  } else if (!SVs.inAList) {
    title = SVs.title;
  }
  let heading = null;
  let headingId = id + "_title";
  if (SVs.collapsible) {
    if (SVs.open) {
      title = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCaretDown }),
        " ",
        title,
        " (click to close)"
      ] });
    } else {
      title = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCaretRight }),
        " ",
        title,
        " (click to open)"
      ] });
    }
  }
  let headingStyle = {};
  if (SVs.collapsible || SVs.boxed) {
    headingStyle = {
      marginBlockStart: 0,
      marginBlockEnd: 0
    };
  }
  if (title) {
    switch (SVs.level) {
      case 0:
        heading = /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { id: headingId, style: headingStyle, children: title });
        break;
      case 1:
        heading = /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { id: headingId, style: headingStyle, children: title });
        break;
      case 2:
        heading = /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { id: headingId, style: headingStyle, children: title });
        break;
      case 3:
        heading = /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { id: headingId, style: headingStyle, children: title });
        break;
      case 4:
        heading = /* @__PURE__ */ jsxRuntimeExports.jsx("h5", { id: headingId, style: headingStyle, children: title });
        break;
      default:
        heading = /* @__PURE__ */ jsxRuntimeExports.jsx("h6", { id: headingId, style: headingStyle, children: title });
        break;
    }
  }
  const validationState = calculateValidationState(SVs);
  let checkWorkComponent = createCheckWorkComponent(
    SVs,
    id,
    validationState,
    submitAllAnswers,
    true
  );
  if (checkWorkComponent) {
    checkWorkComponent = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: checkWorkComponent });
  }
  if (SVs.asList) {
    children = children.filter((child) => child !== null);
    const numChildren = children.length;
    let firstInd = SVs.startsWithIntroduction ? 1 : 0;
    let lastInd = SVs.endsWithConclusion ? numChildren - 2 : numChildren - 1;
    const newChildren = [];
    if (SVs.startsWithIntroduction) {
      newChildren.push(children[0]);
    }
    newChildren.push(
      /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { children: children.slice(firstInd, lastInd + 1).map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: child }, child.key)) }, "list")
    );
    if (SVs.endsWithConclusion) {
      newChildren.push(children[numChildren - 1]);
    }
    children = newChildren;
  } else if (SVs._compositeReplacementActiveRange) {
    children = addCommasForCompositeRanges({
      children,
      compositeReplacementActiveRange: SVs._compositeReplacementActiveRange,
      startInd: 0,
      endInd: children.length - 1,
      removedInd: removedChildInd
    });
  }
  let content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    heading,
    children,
    checkWorkComponent
  ] });
  if (SVs.collapsible) {
    let innerContent = null;
    if (SVs.open) {
      innerContent = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "block", padding: "6px" }, children: [
        SVs.rendered ? children : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Initializing..." }),
        checkWorkComponent
      ] });
    }
    content = /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "div",
      {
        style: {
          border: "var(--mainBorder)",
          borderRadius: "var(--mainBorderRadius)",
          marginTop: "24px"
        },
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              style: {
                backgroundColor: SVs.titleColor,
                cursor: "pointer",
                padding: "6px",
                borderBottom: SVs.open ? "var(--mainBorder)" : "none",
                borderTopLeftRadius: "var(--mainBorderRadius)",
                borderTopRightRadius: "var(--mainBorderRadius)"
              },
              tabIndex: "0",
              onKeyPress: (e) => {
                if (e.key === "Enter") {
                  callAction({
                    action: SVs.open ? actions.closeSection : actions.revealSection
                  });
                }
              },
              onClick: () => callAction({
                action: SVs.open ? actions.closeSection : actions.revealSection
              }),
              children: heading
            }
          ),
          innerContent
        ]
      }
    );
  } else if (SVs.boxed) {
    content = /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "div",
      {
        style: {
          border: "var(--mainBorder)",
          borderRadius: "var(--mainBorderRadius)",
          marginTop: "24px"
        },
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              style: {
                padding: "6px",
                borderBottom: "var(--mainBorder)",
                backgroundColor: SVs.titleColor,
                borderTopLeftRadius: "var(--mainBorderRadius)",
                borderTopRightRadius: "var(--mainBorderRadius)"
              },
              children: heading
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "block", padding: "6px" }, children: [
            children,
            checkWorkComponent
          ] })
        ]
      }
    );
  }
  switch (SVs.containerTag) {
    case "aside":
      return /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { id, style: { margin: "12px 0" }, ref, children: content });
    case "article":
      return /* @__PURE__ */ jsxRuntimeExports.jsx("article", { id, style: { margin: "12px 0" }, ref, children: content });
    case "div":
      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id, style: { margin: "12px 0" }, ref, children: content });
    default:
      return /* @__PURE__ */ jsxRuntimeExports.jsx("section", { id, style: { margin: "12px 0" }, ref, children: content });
  }
});
export {
  section as default
};
