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