import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["as", "fullWidth", "fullHeight", "noShrink", "inlineFlex", "alignItems", "alignContent", "justifyContent", "wrap", "wrapReverse", "alignSelf", "direction", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "gap", "children", "className", "flex"];
import * as React from 'react';
import classNames from 'classnames';
import { DIRECTION, JUSTIFY_VALUES, ALIGNMENT_VALUES, MARGINS, GAP_VALUES, FLEX_VALUES } from './FlexConsts';
import { generateResponsiveClassNames } from '../utils/responsive-props';
export { DIRECTION, JUSTIFY_VALUES, ALIGNMENT_VALUES, MARGINS, GAP_VALUES, FLEX_VALUES };
var Flex = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _props$as = props.as,
      Container = _props$as === void 0 ? 'div' : _props$as,
      fullWidth = props.fullWidth,
      fullHeight = props.fullHeight,
      noShrink = props.noShrink,
      inlineFlex = props.inlineFlex,
      alignItems = props.alignItems,
      alignContent = props.alignContent,
      justifyContent = props.justifyContent,
      wrap = props.wrap,
      wrapReverse = props.wrapReverse,
      alignSelf = props.alignSelf,
      direction = props.direction,
      margin = props.margin,
      marginTop = props.marginTop,
      marginBottom = props.marginBottom,
      marginLeft = props.marginLeft,
      marginRight = props.marginRight,
      gap = props.gap,
      children = props.children,
      className = props.className,
      flex = props.flex,
      otherProps = _objectWithoutProperties(props, _excluded);

  var flexClass = classNames.apply(void 0, ['sg-flex'].concat(_toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return propValue === true ? "sg-flex--full-width" : "sg-flex--auto-width";
  }, fullWidth)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return propValue === true ? "sg-flex--full-height" : "sg-flex--auto-height";
  }, fullHeight)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return propValue === true ? "sg-flex--no-shrink" : "sg-flex--shrink-1";
  }, noShrink)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return propValue === true ? "sg-flex--inline" : "sg-flex--flex";
  }, inlineFlex)), _toConsumableArray(generateResponsiveClassNames(function (direction) {
    if (direction === DIRECTION.COLUMN) {
      return 'sg-flex--column';
    } else if (direction === DIRECTION.COLUMN_REVERSE) {
      return 'sg-flex--column-reverse';
    } else if (direction === DIRECTION.ROW) {
      return 'sg-flex--row';
    } else if (direction === DIRECTION.ROW_REVERSE) {
      return 'sg-flex--row-reverse';
    } else {
      return 'sg-flex--row';
    }
  }, direction)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return propValue === true ? "sg-flex--inline" : "sg-flex--flex";
  }, inlineFlex)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--justify-content-".concat(propValue);
  }, justifyContent)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--align-items-".concat(propValue);
  }, alignItems)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--align-content-".concat(propValue);
  }, alignContent)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--align-self-".concat(propValue);
  }, alignSelf)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return propValue ? 'sg-flex--wrap' : 'sg-flex--nowrap';
  }, wrap)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return propValue ? 'sg-flex--wrap-reverse' : 'sg-flex--nowrap';
  }, wrapReverse)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--margin-".concat(propValue);
  }, margin)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--margin-top-".concat(propValue);
  }, marginTop)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--margin-right-".concat(propValue);
  }, marginRight)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--margin-bottom-".concat(propValue);
  }, marginBottom)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--margin-left-".concat(propValue);
  }, marginLeft)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--gap-".concat(propValue);
  }, gap)), _toConsumableArray(generateResponsiveClassNames(function (propValue) {
    return "sg-flex--flex-".concat(propValue);
  }, flex)), [className]));
  return (
    /*#__PURE__*/
    // @ts-expect-error ts migration
    React.createElement(Container, _extends({}, otherProps, {
      className: flexClass,
      ref: ref
    }), children)
  );
});
Flex.displayName = 'Flex';
export default Flex;