"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Drawer_exports = {};
__export(Drawer_exports, {
  Direction: () => Direction,
  default: () => Drawer_default
});
module.exports = __toCommonJS(Drawer_exports);
var import_react = __toESM(require("react"));
var import_react_dom = __toESM(require("react-dom"));
var import_styled_components = __toESM(require("styled-components"));
var import_Flex = __toESM(require("../Flex"));
var import_Divider = __toESM(require("../../asorted/Divider"));
var import_CloseMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/CloseMedium"));
var import_ArrowLeftMedium = __toESM(require("@ledgerhq/icons-ui/reactLegacy/ArrowLeftMedium"));
var import_TransitionSlide = __toESM(require("../../transitions/TransitionSlide"));
var import_TransitionInOut = __toESM(require("../../transitions/TransitionInOut"));
var import_Text = __toESM(require("../../asorted/Text"));
var import_Button = __toESM(require("../../cta/Button"));
var Direction = /* @__PURE__ */ ((Direction2) => {
  Direction2["Left"] = "left";
  Direction2["Right"] = "right";
  return Direction2;
})(Direction || {});
const Container = (0, import_styled_components.default)(import_Flex.default)`
  width: 100%;
  height: 100%;
  flex-direction: column;
`;
const Wrapper = (0, import_styled_components.default)(import_Flex.default)`
  height: 100%;
  width: ${(p) => p.big ? p.theme.sizes.drawer.side.big.width : p.theme.sizes.drawer.side.small.width}px;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  z-index: ${(p) => p.theme.zIndexes[8]};
`;
const Overlay = import_styled_components.default.div`
  display: flex;
  position: fixed;
  justify-content: ${(p) => p.direction === "left" /* Left */ ? "flex-end" : "flex-start"};
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: ${(p) => p.theme.colors.constant.overlay};
`;
const ScrollWrapper = (0, import_styled_components.default)(import_Flex.default)`
  &::-webkit-scrollbar {
    display: none;
  }
`;
const ButtonPlaceholder = import_styled_components.default.div`
  min-width: ${(p) => p.theme.space[12]}px;
`;
const DrawerContent = import_react.default.forwardRef(
  ({
    isOpen,
    title,
    children,
    footer,
    big,
    onClose,
    backgroundColor,
    setTransitionsEnabled = () => 0,
    onBack,
    extraContainerProps,
    extraHeaderProps,
    extraFooterProps,
    extraFooterDividerProps,
    ignoreBackdropClick = false,
    hideNavigation = true,
    direction = "left" /* Left */
  }, ref) => {
    const disableChildAnimations = (0, import_react.useCallback)(
      () => setTransitionsEnabled(false),
      [setTransitionsEnabled]
    );
    const enableChildAnimations = (0, import_react.useCallback)(
      () => setTransitionsEnabled(true),
      [setTransitionsEnabled]
    );
    const handleBackdropClick = (0, import_react.useCallback)(() => {
      if (!ignoreBackdropClick) {
        onClose();
      }
    }, [onClose, ignoreBackdropClick]);
    const stopClickPropagation = (0, import_react.useCallback)((e) => {
      e.stopPropagation();
    }, []);
    return /* @__PURE__ */ import_react.default.createElement(
      import_TransitionInOut.default,
      {
        in: isOpen,
        appear: true,
        mountOnEnter: true,
        unmountOnExit: true,
        onEntering: disableChildAnimations,
        onEntered: enableChildAnimations,
        onExiting: disableChildAnimations
      },
      /* @__PURE__ */ import_react.default.createElement(Overlay, { direction, onClick: handleBackdropClick, ref }, /* @__PURE__ */ import_react.default.createElement(
        import_TransitionSlide.default,
        {
          in: isOpen,
          direction,
          fixed: true,
          reverseExit: true,
          appear: true,
          mountOnEnter: true,
          unmountOnExit: true
        },
        /* @__PURE__ */ import_react.default.createElement(
          Wrapper,
          {
            big,
            onClick: stopClickPropagation,
            backgroundColor: backgroundColor ?? "background.main"
          },
          /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(
            import_Flex.default,
            {
              justifyContent: "space-between",
              alignItems: "center",
              p: 12,
              pb: 10,
              ...extraHeaderProps
            },
            !hideNavigation && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, onBack != null ? /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "neutral", onClick: onBack, Icon: import_ArrowLeftMedium.default }) : /* @__PURE__ */ import_react.default.createElement(ButtonPlaceholder, null)),
            /* @__PURE__ */ import_react.default.createElement(import_Text.default, { variant: "h3", flex: 1, textAlign: "center" }, title) || /* @__PURE__ */ import_react.default.createElement("div", null),
            /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignSelf: "flex-start" }, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "neutral", onClick: onClose, Icon: import_CloseMedium.default }))
          ), /* @__PURE__ */ import_react.default.createElement(
            ScrollWrapper,
            {
              flexDirection: "column",
              alignItems: "stretch",
              overflow: "scroll",
              position: "relative",
              p: 12,
              pt: 0,
              flex: 1,
              ...extraContainerProps
            },
            children
          ), footer && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Divider.default, { ...extraFooterDividerProps }), /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { alignItems: "center", py: 8, px: 12, ...extraFooterProps }, footer)))
        )
      ))
    );
  }
);
const Drawer = ({ children, menuPortalTarget, ...sideProps }, ref) => {
  const $root = import_react.default.useMemo(
    () => menuPortalTarget === void 0 && typeof document !== "undefined" ? document.querySelector("body") : menuPortalTarget,
    [menuPortalTarget]
  );
  if (!$root) {
    return /* @__PURE__ */ import_react.default.createElement(DrawerContent, { ref, ...sideProps }, children);
  } else {
    return import_react_dom.default.createPortal(
      /* @__PURE__ */ import_react.default.createElement(DrawerContent, { ref, ...sideProps }, children),
      $root
    );
  }
};
var Drawer_default = import_react.default.forwardRef(Drawer);
//# sourceMappingURL=index.js.map
