import { jsx, jsxs } from "react/jsx-runtime";
import * as RadixDialog from "@radix-ui/react-dialog";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useCompareValues } from "../../hooks/useCompareValues.js";
import { concat } from "../../utils/classNames.js";
import { useArmstrongConfig } from "../config/config.context.js";
import "./dialog.theme.css.js";
const Dialog = React.forwardRef(
  (props, ref) => {
    const { children, title, description, closeButtonIcon, open, onOpenChange, onClose, className, data, overlayClassName, testId, delayCloseFor, ...nativeProps } = props;
    const globals = useArmstrongConfig({
      dialogCloseButtonIcon: closeButtonIcon
    });
    const [finishAction, setFinishAction] = React.useState(open ? void 0 : "close");
    const [visible, setVisible] = React.useState(open);
    const resolverRef = React.useRef();
    const finishActionChanged = useCompareValues(finishAction);
    const openHasChanged = useCompareValues(open);
    const openChangeListeners = React.useRef([]);
    const onInnerOpenChange = React.useCallback((val) => {
      setFinishAction(val ? void 0 : "close");
      if (!val && delayCloseFor) {
        setTimeout(() => {
          setVisible(false);
        }, delayCloseFor);
        return;
      }
      setVisible(val);
    }, [delayCloseFor]);
    const onOpen = React.useCallback(() => new Promise((res) => {
      onInnerOpenChange(true);
      resolverRef.current = res;
    }), [onInnerOpenChange]);
    const setOk = React.useCallback(() => setFinishAction("ok"), []);
    const setClose = React.useCallback(() => setFinishAction("close"), []);
    const setCancel = React.useCallback(() => setFinishAction("cancel"), []);
    React.useImperativeHandle(ref, () => ({
      open: onOpen,
      close: setClose,
      ok: setOk,
      cancel: setCancel,
      isOpen: !!visible,
      addOpenChangeListener: (listener) => {
        openChangeListeners.current.push(listener);
        return () => {
          openChangeListeners.current = openChangeListeners.current.filter((l) => l !== listener);
        };
      }
    }), [onOpen, setCancel, setClose, setOk, visible]);
    React.useEffect(() => {
      if (finishAction && resolverRef.current) {
        resolverRef.current({ action: finishAction, data });
        resolverRef.current = void 0;
      }
      if (finishActionChanged) {
        onOpenChange == null ? void 0 : onOpenChange(!finishAction);
        if (finishAction) {
          onClose == null ? void 0 : onClose();
          if (delayCloseFor) {
            setTimeout(() => {
              setVisible(false);
            }, delayCloseFor);
          } else {
            setVisible(false);
          }
        }
      }
    }, [finishActionChanged, finishAction, data, onOpenChange, onClose, delayCloseFor]);
    React.useEffect(() => {
      if (openHasChanged && open !== void 0) {
        onInnerOpenChange(open);
      }
    }, [open, onInnerOpenChange, openHasChanged]);
    React.useEffect(() => {
      openChangeListeners.current.forEach((listener) => listener(!!visible));
    }, [visible]);
    return jsx(RadixDialog.Root, { open: visible, onOpenChange: onInnerOpenChange, children: globals.globalPortalTo && ReactDOM.createPortal(jsx(RadixDialog.Overlay, { className: concat("arm-dialog-overlay", overlayClassName), "data-visible": !finishAction, children: jsxs(RadixDialog.Content, { className: concat("arm-dialog", className), "data-has-title": title ? true : void 0, "data-testid": testId, "data-visible": !finishAction, ...nativeProps, children: [title && jsx(RadixDialog.Title, { className: "arm-dialog-title", children: title }), description && jsx(RadixDialog.Description, { className: "arm-dialog-description", children: description }), children && jsx("div", { className: "arm-dialog-content", children }), globals.dialogCloseButtonIcon !== false && jsx(RadixDialog.Close, { className: "arm-dialog-close", "aria-label": "Close", children: globals.dialogCloseButtonIcon })] }) }), globals.globalPortalTo) });
  }
  // type assertion to ensure generic works with RefForwarded component
  // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef
);
Dialog.displayName = "Dialog";
export {
  Dialog
};
//# sourceMappingURL=dialog.component.js.map
