import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["sx", "inline", "direction", "flexDirection", "wrap", "flexWrap", "flow", "flexFlow", "justifyContent", "alignItems", "alignContent", "gap", "rowGap", "columnGap"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

/* eslint-disable react/forbid-prop-types */
import React from "react";
import PropTypes from "prop-types";
import Box from "../Box";
import Item from "./Item";
var CssFlex = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var sx = props.sx,
      inline = props.inline,
      direction = props.direction,
      flexDirection = props.flexDirection,
      wrap = props.wrap,
      flexWrap = props.flexWrap,
      flow = props.flow,
      flexFlow = props.flexFlow,
      justifyContent = props.justifyContent,
      alignItems = props.alignItems,
      alignContent = props.alignContent,
      gap = props.gap,
      rowGap = props.rowGap,
      columnGap = props.columnGap,
      boxProps = _objectWithoutProperties(props, _excluded);

  var styles = _objectSpread({
    display: inline ? "inline-flex" : "flex",
    flexDirection: direction !== null && direction !== void 0 ? direction : flexDirection,
    flexWrap: wrap !== null && wrap !== void 0 ? wrap : flexWrap,
    flexFlow: flow !== null && flow !== void 0 ? flow : flexFlow,
    justifyContent: justifyContent,
    alignItems: alignItems,
    alignContent: alignContent,
    gap: gap,
    rowGap: rowGap,
    columnGap: columnGap
  }, sx);

  return /*#__PURE__*/React.createElement(Box, _extends({
    sx: styles,
    ref: ref
  }, boxProps));
});

var combine = function combine(arr, arr2) {
  var result = [];
  arr.forEach(function (left) {
    arr2.forEach(function (right) {
      result.push("".concat(left, " ").concat(right));
    });
  });
  return result;
};

var directions = ["row", "row-reverse", "column", "column-reverse"];
var wraps = ["nowrap", "wrap", "wrap-reverse"];
var flows = combine(directions, wraps);
var justifyContents = ["center", "start", "end", "flex-start", "flex-end", "left", "right", "normal", "space-between", "space-around", "space-evenly", "stretch", "safe center", "unsafe center"];
var alignItems = ["normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "baseline", "first baseline", "last baseline", "safe center", "unsafe center"];
var alignContents = ["flex-start", "flex-end", "center", "space-between", "space-around", "stretch"];

var validateStyleSystemProp = function validateStyleSystemProp(validation) {
  return PropTypes.oneOfType([validation, PropTypes.arrayOf(PropTypes.oneOfType([validation, PropTypes.instanceOf(null)]))]);
};

CssFlex.propTypes = {
  direction: validateStyleSystemProp(PropTypes.oneOf(directions)),
  flexDirection: validateStyleSystemProp(PropTypes.oneOf(directions)),
  wrap: validateStyleSystemProp(PropTypes.oneOf(wraps)),
  flexWrap: validateStyleSystemProp(PropTypes.oneOf(wraps)),
  flow: validateStyleSystemProp(PropTypes.oneOf(flows)),
  flexFlow: validateStyleSystemProp(PropTypes.oneOf(flows)),
  justifyContent: validateStyleSystemProp(PropTypes.oneOf(justifyContents)),
  alignItems: validateStyleSystemProp(PropTypes.oneOf(alignItems)),
  alignContent: validateStyleSystemProp(PropTypes.oneOf(alignContents)),
  gap: validateStyleSystemProp(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  rowGap: validateStyleSystemProp(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  columnGap: validateStyleSystemProp(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  sx: PropTypes.object,
  inline: PropTypes.bool,
  component: PropTypes.elementType
};

if (process.env.NODE_ENV !== "production") {
  CssFlex.displayName = "CssFlex";
}

CssFlex.Item = Item;
export default CssFlex;