import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { c as clsx } from "../../lite-DVmmD_-j.js";
import { Switch } from "../toggle/switch.js";
import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
import { Button } from "../button/button.js";
import { icons } from "../../icons/icons.js";
import { HStack } from "../layout/hstack.js";
import { BaseControl } from "../base-control/base-control.js";
/**
 * Component that provides a container panel for options, with an optional title.
 * Best used within the Gutenberg sidebar, instead of the default `PanelBody` component.
 * Ensures that the content is spaced nicely.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {string} [props.className] - Classes to pass to the container.
 * @param {string} [props.title] - Title to display on the top of the panel.
 * @param {JSX.Element} [props.icon] - Icon to display on the top of the panel.
 * @param {string} [props.subtitle] - Subtitle to display on the top of the panel.
 * @param {boolean} [props.use] - Controls the panel use toggle.
 * @param {Function} [props.onUseChange] - Function to call when the use toggle is toggled. `(value: boolean) => void`.
 * @param {boolean} [props.closable] - If `true`, the panel can be closed. Will not show if `title` is not set.
 * @param {boolean} [props.startOpen=false] - Controls whether the panel is open by default.
 * @param {JSX.Element} [props.actions] - Actions to show at the end
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The ContainerPanel component.
 *
 * @example
 * <ContainerPanel title='Paragraph'>
 * 	...
 * </ContainerPanel>
 *
 * @preserve
 */
const ContainerPanel = (props) => {
  const { children, className, title, icon, subtitle, use, onUseChange, closable, startOpen = false, actions, hidden } = props;
  const [open, setOpen] = useState(startOpen);
  if (hidden) {
    return null;
  }
  if (!title && typeof use === "undefined") {
    return /* @__PURE__ */ jsx("div", { className: clsx("es:space-y-2 es:border-t es:border-t-secondary-200 es:p-4", className), children });
  }
  const justUse = !closable && typeof onUseChange !== "undefined";
  const justClosable = closable && typeof onUseChange === "undefined";
  const useAndClosable = closable && typeof onUseChange !== "undefined";
  return /* @__PURE__ */ jsxs(
    BaseControl,
    {
      icon,
      label: title,
      subtitle,
      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
        actions,
        /* @__PURE__ */ jsxs(
          HStack,
          {
            hidden: !closable && !onUseChange,
            className: "es:ml-auto",
            children: [
              onUseChange && /* @__PURE__ */ jsx(
                Switch,
                {
                  checked: use,
                  onChange: (value) => {
                    if (!value) {
                      setOpen(false);
                    }
                    onUseChange(value);
                  }
                }
              ),
              closable && /* @__PURE__ */ jsx(
                Button,
                {
                  onPress: () => setOpen(!open),
                  icon: (typeof use !== "undefined" ? open && use : open) ? icons.caretDownFill : icons.caretDown,
                  type: "ghost",
                  size: "small",
                  className: clsx("es:icon:size-5 es:icon:transition-transform", (typeof use !== "undefined" ? open && use : open) && "es:icon:-scale-y-100"),
                  disabled: typeof use !== "undefined" && !use
                }
              )
            ]
          }
        )
      ] }),
      className: clsx(
        "es:border-t es:border-t-secondary-200",
        !closable && typeof use === "undefined" && "es:space-y-2",
        justClosable && open && "es:pb-4",
        justUse && use && "es:pb-4",
        useAndClosable && use && open && "es:pb-4",
        !justClosable && !justUse && !useAndClosable && "es:pb-4",
        !closable && !onUseChange && typeof use === "undefined" && "es:px-4",
        className
      ),
      labelContainerClassName: clsx((closable || onUseChange) && "es:pl-4 es:pr-3 es:min-h-12", !(closable || onUseChange) && "es:mt-3 es:mb-3", "es:pb-0!"),
      controlContainerClassName: "es:px-4",
      labelClassName: "es:text-secondary-600!",
      children: [
        !closable && !onUseChange && typeof use === "undefined" && children,
        closable && typeof use === "undefined" && /* @__PURE__ */ jsx(
          AnimatedVisibility,
          {
            visible: open,
            className: "es:space-y-2 es:px-4",
            transition: "slideFadeDownSlight",
            noInitial: true,
            children
          }
        ),
        typeof use !== "undefined" && /* @__PURE__ */ jsx(
          AnimatedVisibility,
          {
            visible: closable ? use && open : use,
            className: "es:space-y-2 es:px-4",
            transition: "slideFadeDownSlight",
            noInitial: true,
            children
          }
        )
      ]
    }
  );
};
export {
  ContainerPanel
};
