import {
  AccordionLink
} from "./chunk-6GGDGE7D.js";

// src/components/Accordion/Accordion.tsx
import classNames from "classnames/dedupe";
import { useEffect, useState, useId } from "react";
import { usePrefersReducedMotion } from "@simplybusiness/mobius-hooks";
import "@simplybusiness/mobius/src/components/Accordion/Accordion.css";
import { jsx, jsxs } from "react/jsx-runtime";
var Accordion = ({ ref, ...props }) => {
  const {
    showText = "See more",
    hideText = "See less",
    headerPosition = "top",
    startOpen = false,
    linkElementType,
    onClick,
    onOpen,
    onClose,
    onChange = () => {
    },
    headerChildren,
    ...rest
  } = props;
  const [accordionState, setAccordionState] = useState({
    open: startOpen,
    withAnimation: false
  });
  const prefersReducedMotion = usePrefersReducedMotion();
  const containerClasses = classNames(
    "mobius",
    "mobius-accordion",
    props.className,
    {
      "--should-animate": accordionState.withAnimation && !prefersReducedMotion,
      "--is-open": accordionState.open
    }
  );
  const contentContainerClasses = classNames(
    "mobius-accordion__content-container",
    {
      "--is-open": accordionState.open
    }
  );
  const contentClasses = classNames("mobius-accordion__content", {
    "--is-open": accordionState.open
  });
  const linkText = accordionState.open ? hideText : showText;
  const handleChange = () => {
    if (!accordionState.open && onOpen) {
      onOpen();
    }
    if (accordionState.open && onClose) {
      onClose();
    }
    if (onChange) {
      onChange(!accordionState.open);
    }
    setAccordionState({
      open: !accordionState.open,
      withAnimation: true
    });
  };
  useEffect(() => {
    setAccordionState({
      open: startOpen,
      withAnimation: true
    });
  }, [startOpen]);
  const baseId = useId();
  const accordionId = `accordion-header-${baseId}`;
  const contentId = `accordion-panel-${baseId}`;
  return /* @__PURE__ */ jsxs("div", { ref, ...rest, className: containerClasses, children: [
    headerPosition === "top" && /* @__PURE__ */ jsx(
      AccordionLink,
      {
        text: linkText,
        elementType: linkElementType,
        toggle: handleChange,
        onClick,
        ariaExpanded: accordionState.open,
        headerChildren,
        accordionId,
        contentId
      }
    ),
    /* @__PURE__ */ jsx(
      "div",
      {
        id: contentId,
        className: contentContainerClasses,
        "aria-hidden": !accordionState.open,
        "aria-labelledby": accordionId,
        role: "region",
        children: /* @__PURE__ */ jsx("div", { className: contentClasses, children: props.children })
      }
    ),
    headerPosition === "bottom" && /* @__PURE__ */ jsx(
      AccordionLink,
      {
        text: linkText,
        toggle: handleChange,
        onClick,
        ariaExpanded: accordionState.open,
        headerChildren,
        accordionId,
        contentId
      }
    )
  ] });
};
Accordion.displayName = "Accordion";

export {
  Accordion
};
//# sourceMappingURL=chunk-7JT4DKQA.js.map
