import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from 'react';
import clsx from 'clsx';
import FlexContext from './FlexContext';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

const FlexItem = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('flexitem', prefixCls);

  const {
    style,
    className,
    span,
    children,
    flex
  } = props,
        others = __rest(props, ["style", "className", "span", "children", "flex"]);

  const classes = clsx(bem([span === null || span === void 0 ? void 0 : span.toString()]), className);

  const parseFlex = _flex => {
    if (typeof _flex === 'number') {
      return `${_flex} ${_flex} auto`;
    }

    if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(_flex)) {
      return `0 0 ${_flex}`;
    }

    return _flex;
  };

  return _jsx(FlexContext.Consumer, {
    children: ({
      gutter
    }) => {
      let mergedStyle = Object.assign({}, style);

      if (gutter) {
        mergedStyle = Object.assign(Object.assign(Object.assign({}, gutter[0] > 0 ? {
          paddingLeft: gutter[0] / 2,
          paddingRight: gutter[0] / 2
        } : {}), gutter[1] > 0 ? {
          paddingTop: gutter[1] / 2,
          paddingBottom: gutter[1] / 2
        } : {}), mergedStyle);
      }

      if (flex) {
        mergedStyle.flex = parseFlex(flex);
      }

      return _jsx("div", Object.assign({}, others, {
        style: mergedStyle,
        className: classes
      }, {
        children: children
      }));
    }
  });
};

export default FlexItem;