"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ZStack = exports.VStack = exports.HStack = void 0;
var _react = _interopRequireDefault(require("react"));
var _typeHelpers = require("../../../theme/utils/type-helpers");
var _useStyleProps = require("../../../hooks/useStyleProps");
var _box = _interopRequireDefault(require("../box/box"));
var _styleFunctions = require("../../../theme/src/style-functions");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
/**
 * Stack is a layout component that makes it easy to stack elements together and apply a space between them.
 */
const Stack = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  direction = "vertical",
  spacing = "2",
  ...rest
}, ref) => {
  const arrayChildren = _react.default.Children.toArray(children);

  /**
   * Renders the children of the stack.
   *
   * @returns The rendered children.
   */
  const renderChildren = _react.default.useMemo(() => {
    return arrayChildren.map((child, index) => {
      const isLast = index === arrayChildren.length - 1;
      return /*#__PURE__*/_react.default.createElement(_box.default, {
        key: index,
        flexDirection: direction === "horizontal" ? "row" : "column",
        mr: !isLast ? direction === "horizontal" ? spacing : undefined : undefined,
        mb: !isLast ? direction === "vertical" ? spacing : undefined : undefined
      }, /*#__PURE__*/_react.default.cloneElement(child), rest.divider && !isLast && /*#__PURE__*/_react.default.cloneElement(rest.divider, {
        orientation: direction === "horizontal" ? "vertical" : "horizontal",
        ml: direction === "horizontal" ? spacing : undefined,
        mt: direction === "vertical" ? spacing : undefined
      }));
    });
  }, [arrayChildren, direction, spacing, rest.divider]);
  return /*#__PURE__*/_react.default.createElement(_box.default, _extends({}, rest, {
    flexDirection: direction === "horizontal" ? "row" : "column",
    flexWrap: direction === "horizontal" ? "wrap" : "nowrap",
    ref: ref
  }), renderChildren);
}));

/**
 * HStack is a layout component that stacks elements horizontally and apply a space between them.
 */
const HStack = exports.HStack = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  ...rest
}, ref) => {
  return /*#__PURE__*/_react.default.createElement(Stack, _extends({}, rest, {
    direction: "horizontal",
    ref: ref
  }), children);
}));

/**
 * VStack is a layout component that stacks elements vertically and apply a space between them.
 */
const VStack = exports.VStack = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  ...rest
}, ref) => {
  return /*#__PURE__*/_react.default.createElement(Stack, _extends({}, rest, {
    direction: "vertical",
    ref: ref
  }), children);
}));

/**
 * ZStack is a layout component that stacks elements on top of each other.
 */
const ZStack = exports.ZStack = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  reversed = false,
  spacing = "2",
  ...rest
}, ref) => {
  const arrayChildren = _react.default.Children.toArray(children);

  /**
   * Renders the children of the stack.
   *
   * @returns The rendered children.
   */
  const renderChildren = arrayChildren.map((child, index) => {
    const isOverridenZIndexProvided = child.props && (0, _typeHelpers.getKeys)(child.props).includes("zIndex");
    const computedZIndex = (0, _useStyleProps.useStyleProps)(child.props, [..._styleFunctions.positionStyleFunction]);
    return /*#__PURE__*/_react.default.cloneElement(child, {
      ...child.props,
      style: {
        position: index === 0 ? "relative" : "absolute",
        marginLeft: index * Number(spacing),
        zIndex: isOverridenZIndexProvided ? computedZIndex.style.zIndex : reversed ? arrayChildren.length - index : index,
        ...child.props.style
      }
    });
  });
  return /*#__PURE__*/_react.default.createElement(_box.default, _extends({
    alignSelf: "flex-start"
  }, rest, {
    ref: ref
  }), renderChildren);
}));
Stack.displayName = "Stack";
HStack.displayName = "HStack";
VStack.displayName = "VStack";
ZStack.displayName = "ZStack";
var _default = exports.default = Stack;
//# sourceMappingURL=stack.js.map