import { jsx, jsxs } from "react/jsx-runtime";
import assert from "assert";
import { createContext, useMemo } from "react";
import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
import dedent from "dedent";
import { Box } from "../Box/Box.mjs";
import { Stack } from "../Stack/Stack.mjs";
import { Divider } from "../Divider/Divider.mjs";
const buildDataAttributes = ({ data, validateRestProps }) => {
  if (process.env.NODE_ENV !== "production") {
    if (validateRestProps !== false) {
      const dataAttrs = Object.keys(validateRestProps).filter(
        (prop) => prop.startsWith("data-")
      );
      const formatter = (v) => {
        if (typeof v === "boolean") {
          return v ? "" : `={false}`;
        }
        if (typeof v === "number") {
          return `={${v}}`;
        }
        return `="${v}"`;
      };
      if (dataAttrs.length > 0) {
        console.warn(
          dedent`
          Braid components do not support the native data attribute format. Use the “data” prop instead.
            <Component
          %c${dataAttrs.map((attr) => `-    ${attr}${formatter(validateRestProps[attr])}`).join("\n")}
          %c+    data={{
          ${dataAttrs.map((attr) => {
            const attributeName = attr.replace(/^data-/, "");
            const property = attributeName.includes("-") ? `'${attributeName}'` : attributeName;
            return `+      ${property}: ${typeof validateRestProps[attr] === "string" ? `'${validateRestProps[attr]}'` : validateRestProps[attr]},`;
          }).join("\n")}
          +    }}
            %c/>
           For more details, see the “Data Attributes” documentation:
           https://seek-oss.github.io/braid-design-system/components/Box#data-attributes
        `,
          "color: red",
          "color: green",
          "color: inherit"
        );
      }
    }
  }
  if (!data) {
    return;
  }
  const keys = Object.keys(data);
  const dataAttributes = {};
  for (const key of keys) {
    dataAttributes[`data-${key}`] = data[key];
  }
  return dataAttributes;
};
const validTones = ["neutral", "secondary"];
const AccordionContext = createContext(
  null
);
const validSpaceValues = ["medium", "large", "xlarge"];
const defaultSpaceForSize = {
  divided: {
    xsmall: "medium",
    small: "medium",
    standard: "medium",
    large: "large"
  },
  undivided: {
    xsmall: "large",
    small: "large",
    standard: "large",
    large: "large"
  }
};
const Accordion = ({
  children,
  size = "large",
  tone,
  weight,
  space: spaceProp,
  dividers = true,
  data,
  ...restProps
}) => {
  assert(
    spaceProp === void 0 || Object.values(normalizeResponsiveValue(spaceProp)).every(
      (value) => value === void 0 || validSpaceValues.includes(value)
    ),
    `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`
  );
  assert(
    tone === void 0 || validTones.includes(tone),
    `The 'tone' prop should be one of the following: ${validTones.map((x) => `"${x}"`).join(", ")}`
  );
  const contextValue = useMemo(
    () => ({ size, tone, weight }),
    [size, tone, weight]
  );
  const space = spaceProp ?? defaultSpaceForSize[dividers ? "divided" : "undivided"][size];
  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: !dividers ? /* @__PURE__ */ jsx(Stack, { space, data, children }) : /* @__PURE__ */ jsxs(Box, { ...buildDataAttributes({ data, validateRestProps: restProps }), children: [
    /* @__PURE__ */ jsx(Divider, {}),
    /* @__PURE__ */ jsx(Box, { paddingY: space, children: /* @__PURE__ */ jsx(Stack, { space, dividers: true, children }) }),
    /* @__PURE__ */ jsx(Divider, {})
  ] }) });
};
export {
  Accordion,
  AccordionContext,
  buildDataAttributes,
  validSpaceValues,
  validTones
};
