"use client";
import { jsx, jsxs } from "../../packages/jsx/src/jsx-runtime.js";
import { useContext, createContext, useState } from "react";
import { useTheme } from "../../theme/useTheme.js";
import { Icon } from "../../atoms/Icon/Icon.js";
import { Button } from "../Button/Button.js";
const expandableContainerCtx = createContext({
  isExpanded: false,
  setIsExpanded: () => {
  }
});
const { Provider } = expandableContainerCtx;
const expandedStyle = {
  width: "100vw",
  position: "relative",
  left: "50%",
  right: "50%",
  marginLeft: "-50vw",
  marginRight: "-50vw",
  display: "flex",
  justifyContent: "center"
};
function ExpandableContainer(props) {
  const { isExpanded, isExpandedOnMobile } = useContext(expandableContainerCtx);
  const { theme } = useTheme();
  const mobileWidth = theme.breakpoints[0];
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...props,
      "data-expanded": isExpanded,
      css: [
        isExpandedOnMobile === false ? {
          [`@media (min-width: ${mobileWidth})`]: {
            '&[data-expanded="true"]': expandedStyle
          }
        } : { '&[data-expanded="true"]': expandedStyle },
        isExpandedOnMobile && { [`@media (max-width: ${mobileWidth})`]: expandedStyle }
      ]
    }
  );
}
ExpandableContainer.Provider = ExpandableContainerProvider;
ExpandableContainer.Toggle = ExpandableContainerToggle;
function ExpandableContainerProvider({
  children,
  initialState = false,
  isExpandedOnMobile
}) {
  const [isExpanded, setIsExpanded] = useState(initialState);
  return /* @__PURE__ */ jsx(Provider, { value: { isExpanded, setIsExpanded, isExpandedOnMobile }, children });
}
function ExpandableContainerToggle({ children }) {
  const { isExpanded, setIsExpanded, isExpandedOnMobile } = useContext(expandableContainerCtx);
  const CurrentIcon = isExpanded ? Icon.Collapse : Icon.Expand;
  return /* @__PURE__ */ jsxs(
    Button,
    {
      variant: "tertiary",
      type: "button",
      size: "small",
      sx: {
        height: "100%",
        maxHeight: "48px",
        // `mobileState` has higher priority, so it doesn't make sense to display the toggle
        ...isExpandedOnMobile != null ? { display: ["none", "block"] } : {}
      },
      onClick: () => {
        setIsExpanded((state) => !state);
      },
      children: [
        /* @__PURE__ */ jsx(CurrentIcon, {}),
        isExpanded ? "Collapse" : "Expand",
        " ",
        children
      ]
    }
  );
}
export {
  ExpandableContainer,
  ExpandableContainerProvider,
  ExpandableContainerToggle
};
