"use strict";
"use client";
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 Box_exports = {};
__export(Box_exports, {
  default: () => Box_default
});
module.exports = __toCommonJS(Box_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("react");
var import_css = require("@emotion/css");
var import_uuid = require("uuid");
var import_react2 = require("../../../runtimes/react");
var import_Placeholder = __toESM(require("./components/Placeholder"));
var import_animations = require("./animations");
var import_box_models = require("../../../state/modules/box-models");
var import_BackgroundsContainer = __toESM(require("../../shared/BackgroundsContainer"));
var import_responsive_style = require("../../utils/responsive-style");
var import_grid_item = require("../../shared/grid-item");
var import_use_style = require("../../../runtimes/react/use-style");
const Box = (0, import_react.forwardRef)(function Box2({
  id,
  backgrounds,
  width,
  height,
  margin,
  padding,
  border,
  children,
  borderRadius,
  boxShadow,
  rowGap,
  columnGap,
  hidePlaceholder,
  verticalAlign,
  boxAnimateType,
  boxAnimateDuration,
  boxAnimateDelay,
  itemAnimateDelay,
  itemAnimateType,
  itemAnimateDuration,
  itemStaggerDuration
}, ref) {
  const innerRef = (0, import_react.useRef)(null);
  const boxElementObjectRef = (0, import_react.useRef)(null);
  const [animationClassName, replayAnimation, setElement] = (0, import_animations.useBoxAnimation)(
    boxAnimateType,
    boxAnimateDuration,
    boxAnimateDelay,
    itemAnimateType
  );
  const boxElementCallbackRef = (0, import_react.useCallback)((current) => {
    boxElementObjectRef.current = current;
    setElement(current);
  }, []);
  (0, import_react.useImperativeHandle)(
    ref,
    () => ({
      getDomNode() {
        return boxElementObjectRef.current;
      },
      getBoxModel() {
        const paddingBoxElement = innerRef.current;
        const borderBoxElement = innerRef.current;
        const marginBoxElement = boxElementObjectRef.current;
        const borderBox = innerRef.current?.getBoundingClientRect();
        const paddingBoxComputedStyle = paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement);
        const borderBoxComputedStyle = borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement);
        const marginBoxComputedStyle = marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement);
        const padding2 = paddingBoxComputedStyle && {
          top: (0, import_box_models.parse)(paddingBoxComputedStyle.paddingTop),
          right: (0, import_box_models.parse)(paddingBoxComputedStyle.paddingRight),
          bottom: (0, import_box_models.parse)(paddingBoxComputedStyle.paddingBottom),
          left: (0, import_box_models.parse)(paddingBoxComputedStyle.paddingLeft)
        };
        const border2 = borderBoxComputedStyle && {
          top: (0, import_box_models.parse)(borderBoxComputedStyle.borderTopWidth),
          right: (0, import_box_models.parse)(borderBoxComputedStyle.borderRightWidth),
          bottom: (0, import_box_models.parse)(borderBoxComputedStyle.borderBottomWidth),
          left: (0, import_box_models.parse)(borderBoxComputedStyle.borderLeftWidth)
        };
        const margin2 = marginBoxComputedStyle && {
          top: (0, import_box_models.parse)(marginBoxComputedStyle.marginTop),
          right: (0, import_box_models.parse)(marginBoxComputedStyle.marginRight),
          bottom: (0, import_box_models.parse)(marginBoxComputedStyle.marginBottom),
          left: (0, import_box_models.parse)(marginBoxComputedStyle.marginLeft)
        };
        return borderBox ? (0, import_box_models.createBox)({ borderBox, padding: padding2, border: border2, margin: margin2 }) : null;
      }
    }),
    []
  );
  const gridItemClassName = (0, import_use_style.useStyle)(
    (0, import_responsive_style.useResponsiveStyle)([verticalAlign], ([alignItems = "flex-start"]) => ({ alignItems }))
  );
  const [key, setKey] = (0, import_react.useState)(() => (0, import_uuid.v4)());
  const animationProps = {
    boxAnimateType,
    boxAnimateDuration,
    boxAnimateDelay,
    itemAnimateType,
    itemAnimateDuration,
    itemAnimateDelay,
    itemStaggerDuration
  };
  const prevAnimationProps = (0, import_react.useRef)(animationProps);
  (0, import_react.useEffect)(() => {
    if (!(0, import_animations.areBoxAnimationPropsEqual)(prevAnimationProps.current, animationProps)) {
      replayAnimation();
      setKey((0, import_uuid.v4)());
      prevAnimationProps.current = animationProps;
    }
  }, [replayAnimation, animationProps]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_BackgroundsContainer.default,
    {
      ref: boxElementCallbackRef,
      id,
      className: (0, import_css.cx)(
        width,
        margin,
        borderRadius,
        (0, import_use_style.useStyle)({ display: "flex" }),
        (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveStyle)([height], ([alignSelf = "auto"]) => ({ alignSelf }))),
        animationClassName
      ),
      backgrounds,
      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "div",
        {
          ref: innerRef,
          className: (0, import_css.cx)(
            padding,
            boxShadow,
            border,
            (0, import_use_style.useStyle)({ display: "flex", flexWrap: "wrap", width: "100%" }),
            (0, import_use_style.useStyle)(
              (0, import_responsive_style.useResponsiveStyle)([verticalAlign], ([alignContent = "flex-start"]) => ({
                alignContent
              }))
            )
          ),
          children: children && children.elements.length > 0 ? children.elements.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_grid_item.GridItem,
            {
              className: gridItemClassName,
              grid: children.columns,
              index,
              itemAnimateDuration,
              itemAnimateDelay,
              itemStaggerDuration,
              columnGap,
              rowGap,
              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Element, { element: child })
            },
            child.key
          )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Placeholder.default, { hide: hidePlaceholder })
        },
        key
      )
    }
  );
});
var Box_default = Box;
//# sourceMappingURL=Box.js.map