import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["gap", "children", "direction", "justify", "alignItems", "alignContent", "collapse", "className"];
import _JSXStyle from "../styled-jsx.es.js";
import React, { useMemo } from "react";
import GridBasicItem from "../grid/basic-item";
import useScale, { withScale } from '../use-scale';
import { useClasses } from '@helpdice/theme';
import { tuple } from '../utils/prop-types';
import Expandable from "../expandable";
var wrap = tuple('nowrap', 'wrap', 'wrap-reverse');
var Container = function Container(_ref) {
  var _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? 0 : _ref$gap,
    children = _ref.children,
    direction = _ref.direction,
    justify = _ref.justify,
    alignItems = _ref.alignItems,
    alignContent = _ref.alignContent,
    _ref$collapse = _ref.collapse,
    collapse = _ref$collapse === void 0 ? 0 : _ref$collapse,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? '' : _ref$className,
    props = _objectWithoutProperties(_ref, _excluded);
  var _useScale = useScale(),
    unit = _useScale.unit,
    SCALES = _useScale.SCALES;
  var gapUnit = useMemo(function () {
    return "calc(".concat(gap, " * ").concat(unit, " * 1/3)");
  }, [gap, unit]);
  var _styles$className = {
      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
        id: "2357140837",
        dynamic: [gapUnit, direction, collapse ? 'wrap' : wrap, justify, alignContent, alignItems, SCALES.width(1, 'var(--container-width)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
      }, "div.__jsx-style-dynamic-selector{--gap-unit:".concat(gapUnit, ";--container-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";-webkit-flex-wrap:").concat(collapse ? 'wrap' : wrap, ";-ms-flex-wrap:").concat(collapse ? 'wrap' : wrap, ";flex-wrap:").concat(collapse ? 'wrap' : wrap, ";-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";box-sizing:border-box;gap:var(--gap-unit);width:").concat(SCALES.width(1, 'var(--container-width)'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")),
      className: _JSXStyle.dynamic([["2357140837", [gapUnit, direction, collapse ? 'wrap' : wrap, justify, alignContent, alignItems, SCALES.width(1, 'var(--container-width)'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
    },
    resolveClassName = _styles$className.className,
    styles = _styles$className.styles;
  var classes = useClasses(resolveClassName, className);
  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
    className: classes
  }, props), collapse > 10 ? /*#__PURE__*/React.createElement(Expandable, {
    collapsedHeight: collapse
  }, children) : children, styles);
};
Container.displayName = 'Container';
export default withScale(Container);