import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import clsx from 'clsx';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const formatGap = gap => typeof gap === 'number' ? `${gap}px` : gap;

const Space = props => {
  const {
    wrap,
    block,
    direction,
    align,
    justify
  } = props;
  const {
    prefixCls,
    createNamespace
  } = React.useContext(ConfigProviderContext);
  const [bem] = createNamespace('space', prefixCls);
  const style = React.useMemo(() => {
    if (props.gap) {
      if (Array.isArray(props.gap)) {
        const [gapH, gapV] = props.gap;
        return Object.assign(Object.assign({}, props.style), {
          '--gap-vertical': formatGap(gapV),
          '--gap-horizontal': formatGap(gapH)
        });
      }

      return Object.assign(Object.assign({}, props.style), {
        '--gap': formatGap(props.gap)
      });
    }

    return props.style;
  }, [props.style, props.gap]);
  return _jsx("div", Object.assign({
    className: clsx(props.className, bem({
      wrap,
      block,
      [`${direction}`]: !!direction,
      [`align-${align}`]: !!align,
      [`justify-${justify}`]: !!justify
    })),
    style: style,
    onClick: props.onClick
  }, {
    children: React.Children.map(props.children, child => {
      return child !== null && child !== undefined && _jsx("div", Object.assign({
        className: clsx(bem('item'))
      }, {
        children: child
      }));
    })
  }));
};

Space.defaultProps = {
  direction: 'horizontal'
};
export default Space;