import { defineComponent, ref, computed, onMounted, onBeforeUnmount, createVNode } from 'vue';
import '../../../utils/index.mjs';
import '../../../constants/index.mjs';
import '../../../hooks/index.mjs';
import useConfigInject from '../../config-provider/src/hooks/useConfigInject.mjs';
import { useRowStyle } from '../style/index.mjs';
import { useProvideRow } from './context.mjs';
import { rowProps } from './props.mjs';
import { useResponsiveObserver } from '../../../hooks/use-responsive-observe/index.mjs';
import { responsiveArray } from '../../../constants/size.mjs';
import { useFlexGapSupport } from '../../../hooks/use-flex-gap-support/index.mjs';
import { classNames } from '../../../utils/dom/class.mjs';

var ARow = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ARow",
  inheritAttrs: false,
  props: rowProps(),
  setup(props, {
    slots,
    attrs
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject("row", props);
    const [wrapSSR, hashId] = useRowStyle(prefixCls);
    let token;
    const responsiveObserve = useResponsiveObserver();
    const screens = ref({
      xs: true,
      sm: true,
      md: true,
      lg: true,
      xl: true,
      xxl: true
    });
    const curScreens = ref({
      xs: false,
      sm: false,
      md: false,
      lg: false,
      xl: false,
      xxl: false
    });
    const mergePropsByScreen = (oriProp) => {
      return computed(() => {
        if (typeof props[oriProp] === "string")
          return props[oriProp];
        if (typeof props[oriProp] !== "object")
          return "";
        for (let i = 0; i < responsiveArray.length; i++) {
          const breakpoint = responsiveArray[i];
          if (!curScreens.value[breakpoint])
            continue;
          const curVal = props[oriProp][breakpoint];
          if (curVal !== void 0)
            return curVal;
        }
        return "";
      });
    };
    const mergeAlign = mergePropsByScreen("align");
    const mergeJustify = mergePropsByScreen("justify");
    const supportFlexGap = useFlexGapSupport();
    onMounted(() => {
      token = responsiveObserve.value.subscribe((screen) => {
        curScreens.value = screen;
        const currentGutter = props.gutter || 0;
        if (!Array.isArray(currentGutter) && typeof currentGutter === "object" || Array.isArray(currentGutter) && (typeof currentGutter[0] === "object" || typeof currentGutter[1] === "object"))
          screens.value = screen;
      });
    });
    onBeforeUnmount(() => {
      responsiveObserve.value.unsubscribe(token);
    });
    const getGutter = computed(() => {
      const results = [void 0, void 0];
      const {
        gutter = 0
      } = props;
      const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, void 0];
      normalizedGutter.forEach((g, index) => {
        if (typeof g === "object") {
          for (let i = 0; i < responsiveArray.length; i++) {
            const breakpoint = responsiveArray[i];
            if (screens.value[breakpoint] && g[breakpoint] !== void 0) {
              results[index] = g[breakpoint];
              break;
            }
          }
        } else {
          results[index] = g;
        }
      });
      return results;
    });
    useProvideRow({
      gutter: getGutter,
      supportFlexGap,
      wrap: computed(() => props.wrap)
    });
    const classes = computed(() => classNames(prefixCls.value, {
      [`${prefixCls.value}-no-wrap`]: props.wrap === false,
      [`${prefixCls.value}-${mergeJustify.value}`]: mergeJustify.value,
      [`${prefixCls.value}-${mergeAlign.value}`]: mergeAlign.value,
      [`${prefixCls.value}-rtl`]: direction.value === "rtl"
    }, attrs.class, hashId.value));
    const rowStyle = computed(() => {
      const gt = getGutter.value;
      const style = {};
      const horizontalGutter = gt[0] != null && gt[0] > 0 ? `${gt[0] / -2}px` : void 0;
      const verticalGutter = gt[1] != null && gt[1] > 0 ? `${gt[1] / -2}px` : void 0;
      if (horizontalGutter) {
        style.marginLeft = horizontalGutter;
        style.marginRight = horizontalGutter;
      }
      if (supportFlexGap.value) {
        style.rowGap = `${gt[1]}px`;
      } else if (verticalGutter) {
        style.marginTop = verticalGutter;
        style.marginBottom = verticalGutter;
      }
      return style;
    });
    return () => {
      var _a;
      return wrapSSR(createVNode("div", {
        ...attrs,
        "class": classes.value,
        "style": {
          ...rowStyle.value,
          ...attrs.style
        }
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]));
    };
  }
});

export { ARow as default };
//# sourceMappingURL=Row.mjs.map
