import { standardBorderRadius } from "../styles/common.js";
import { Icon } from "./Icon/Icon.js";
import { overflowAutoWithoutScrollbars } from "../styles/utils.js";
import { Spacing } from "../styles/tokens/spacing.js";
import styled from "@emotion/styled";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/Collapsible.tsx
function Collapsible({ children, className, text, color, open, handleToggle, openIcon, closeIcon, full, buttonTextElement, contentIndent = true }) {
	const [isOpen, setIsOpen] = useState(open);
	const handleClick = () => {
		if (handleToggle) handleToggle(!isOpen);
		setIsOpen(!isOpen);
	};
	useEffect(() => {
		setIsOpen(open);
	}, [open]);
	const iconName = openIcon && closeIcon ? isOpen ? closeIcon : openIcon : "Chevron";
	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,
				useCustomIcon: openIcon !== void 0 && closeIcon !== void 0,
				children: /* @__PURE__ */ jsx(Icon, {
					width: iconWidth,
					name: iconName
				})
			})]
		}), /* @__PURE__ */ jsx(CollapsingContainer, {
			isOpen,
			full,
			children: /* @__PURE__ */ jsx(InnerPadding, {
				contentIndent,
				children
			})
		})]
	});
}
const StyledCollapsible = styled.div`
  display: flex;
  flex-direction: column;
`;
const 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;
`;
const IconContainer = styled.div`
  ${(props) => {
	if (props.useCustomIcon) return;
	return props.isOpen ? `transform: rotate(0deg);` : `transform: rotate(-90deg);`;
}}
  transition: transform 0.25s ease-out;
  width: 20px;
`;
const 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;
    }
  }
`;
const InnerPadding = styled.div`
  padding: ${Spacing.px["3xs"]} 0 ${Spacing.px["3xs"]}
    ${(props) => props.contentIndent ? Spacing.px.md : "0"};
  gap: ${Spacing.px["4xs"]};
  display: flex;
  flex-direction: column;
`;
const Text = styled.span`
  ${(props) => props.color ? `color: ${props.color};` : ""}
  line-height: inherit;
`;
//#endregion
export { Collapsible, CollapsingContainer, StyledCollapsible, StyledCollapsibleButton };
