import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-non-null-assertion */

import { useContext, useMemo } from 'react';
import clsx from 'clsx';
import FlexContext from './FlexContext';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const Flex = props => {
  const {
    direction,
    wrap,
    justify,
    align,
    gutter,
    style,
    className,
    children
  } = props,
        rest = __rest(props, ["direction", "wrap", "justify", "align", "gutter", "style", "className", "children"]);

  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('flexbox', prefixCls);
  const getGutter = useMemo(() => Array.isArray(gutter) ? gutter : [gutter, 0], [gutter]);
  const rowStyle = Object.assign(Object.assign(Object.assign({}, getGutter[0] > 0 ? {
    marginLeft: getGutter[0] / -2,
    marginRight: getGutter[0] / -2
  } : {}), getGutter[1] > 0 ? {
    marginTop: getGutter[1] / -2,
    marginBottom: getGutter[1] / 2
  } : {}), style);
  const wrapCls = clsx(className, bem([direction, wrap, justify ? `justify-${justify}` : false, align ? `align-${align}` : false]));
  return _jsx(FlexContext.Provider, Object.assign({
    value: {
      gutter: getGutter
    }
  }, {
    children: _jsx("div", Object.assign({
      className: wrapCls,
      style: rowStyle
    }, rest, {
      children: children
    }))
  }));
};

Flex.defaultProps = {
  gutter: 0
};
export default Flex;