import {
  overflowAutoWithoutScrollbars
} from "./chunk-FCZJILMW.js";
import {
  Icon
} from "./chunk-RWIZ7Q74.js";
import {
  standardBorderRadius
} from "./chunk-JK4BP73A.js";

// src/components/Collapsible.tsx
import styled from "@emotion/styled";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
function Collapsible({
  children,
  className,
  text,
  color,
  open,
  handleToggle,
  hamburger,
  full,
  buttonTextElement,
  contentIndent = true
}) {
  const [isOpen, setIsOpen] = useState(open);
  const handleClick = () => {
    if (handleToggle) {
      handleToggle(!isOpen);
    }
    setIsOpen(!isOpen);
  };
  useEffect(() => {
    setIsOpen(open);
  }, [open]);
  const iconName = hamburger ? isOpen ? "Close" : "StackedLines" : "Down";
  const iconWidth = iconName === "Close" ? 12 : 14;
  let textElement = /* @__PURE__ */ jsx("div", {});
  if (buttonTextElement) {
    textElement = buttonTextElement;
  } else if (text) {
    textElement = /* @__PURE__ */ jsx(Text, { color, children: text });
  }
  return /* @__PURE__ */ jsxs(StyledCollapsible, { className, children: [
    /* @__PURE__ */ jsxs(StyledCollapsibleButton, { onClick: handleClick, children: [
      textElement,
      /* @__PURE__ */ jsx(IconContainer, { isOpen, hamburger, children: /* @__PURE__ */ jsx(Icon, { width: iconWidth, name: iconName }) })
    ] }),
    /* @__PURE__ */ jsx(CollapsingContainer, { isOpen, full, children: /* @__PURE__ */ jsx(InnerPadding, { contentIndent, children }) })
  ] });
}
var StyledCollapsible = styled.div`
  display: flex;
  flex-direction: column;
`;
var StyledCollapsibleButton = styled.button`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  ${standardBorderRadius(8)}
  padding: 0;
`;
var IconContainer = styled.div`
  ${(props) => {
  if (props.hamburger) {
    return;
  }
  return props.isOpen ? `transform: rotate(0deg);` : `transform: rotate(-90deg);`;
}}
  transition: transform 0.25s ease-out;
  width: 20px;
`;
var CollapsingContainer = styled.div`
  overflow: scroll;
  opacity: 0;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;

  ${(props) => props.isOpen ? `height: 100%; animation-name: fadeIn;` : `height: 0; animation-name: fadeOut;`}
  ${(props) => props.full ? `height: ${props.isOpen ? "100vh" : 0};` : ""}

  ${overflowAutoWithoutScrollbars}

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
      transform: none;
    }
    to {
      opacity: 0;
      transform: translateY(-10px);
      visibility: hidden;
    }
  }
`;
var InnerPadding = styled.div`
  padding: ${"4px" /* 3xs */} 0 ${"4px" /* 3xs */}
    ${(props) => props.contentIndent ? "16px" /* md */ : "0"};
  gap: ${"2px" /* 4xs */};
  display: flex;
  flex-direction: column;
`;
var Text = styled.span`
  ${(props) => props.color ? `color: ${props.color};` : ""}
  line-height: inherit;
`;

export {
  Collapsible,
  StyledCollapsible,
  StyledCollapsibleButton,
  CollapsingContainer
};
