"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const types = require("../../../utils/types.js");
const index = require("../../../hooks/use-namespace/index.js");
const Vue = require("vue");
const shared_esmBundler = require("../../../../../@vue/shared/dist/shared.esm-bundler.js");
const SIZE_MAP = {
  small: 8,
  default: 12,
  large: 16
};
function useSpace(props) {
  const ns = index.useNamespace("space");
  const classes = Vue.computed(() => [
    ns.b(),
    ns.m(props.direction),
    props.class
  ]);
  const horizontalSize = Vue.ref(0);
  const verticalSize = Vue.ref(0);
  const containerStyle = Vue.computed(() => {
    return [
      props.wrap || props.fill ? { flexWrap: "wrap" } : {},
      { alignItems: props.alignment },
      {
        rowGap: `${verticalSize.value}px`,
        columnGap: `${horizontalSize.value}px`
      },
      props.style
    ];
  });
  const itemStyle = Vue.computed(() => {
    return props.fill ? {
      flexGrow: 1,
      minWidth: `${props.fillRatio}%`
    } : {};
  });
  Vue.watchEffect(() => {
    const { size = "small", wrap, direction: dir, fill } = props;
    if (shared_esmBundler.isArray(size)) {
      const [h = 0, v = 0] = size;
      horizontalSize.value = h;
      verticalSize.value = v;
    } else {
      let val;
      if (types.isNumber(size)) val = size;
      else val = SIZE_MAP[size || "small"] || SIZE_MAP.small;
      if ((wrap || fill) && dir === "horizontal") horizontalSize.value = verticalSize.value = val;
      else if (dir === "horizontal") {
        horizontalSize.value = val;
        verticalSize.value = 0;
      } else {
        verticalSize.value = val;
        horizontalSize.value = 0;
      }
    }
  });
  return {
    classes,
    containerStyle,
    itemStyle
  };
}
exports.useSpace = useSpace;
