import _extends from "@babel/runtime/helpers/esm/extends";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _class, _Gapped;
import React from 'react';
import { isNonNullable } from "../../../lib/utils";
import { CommonWrapper } from "../../../internal/CommonWrapper";
import { rootNode } from "../../../lib/rootNode";
import { createPropsGetter } from "../../../lib/createPropsGetter";
export var GappedDataTids = {
  vertical: 'Gapped__vertical',
  horizontal: 'Gapped__horizontal'
};

/**
 * Контейнер `Gapped` устанавливает расстояние равное `gap` между элементами.
 */
export var Gapped = rootNode(_class = (_Gapped = /*#__PURE__*/function (_React$Component) {
  function Gapped() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.getProps = createPropsGetter(Gapped.defaultProps);
    return _this;
  }
  _inheritsLoose(Gapped, _React$Component);
  var _proto = Gapped.prototype;
  _proto.render = function render() {
    return /*#__PURE__*/(
      React.createElement(CommonWrapper, _extends({
        rootNodeRef: this.setRootNode
      }, this.props), this.getProps().vertical ? this.renderVertical() : this.renderHorizontal())
    );
  };
  _proto.getGapValue = function getGapValue() {
    // DEPRECATED remove in 4.0
    var propsGap = this.props.gap;
    if (isNonNullable(propsGap)) {
      return propsGap;
    }
    return 8;
  };
  _proto.renderVertical = function renderVertical() {
    var subsequentItemStyle = {
      paddingTop: this.getGapValue()
    };
    var children = React.Children.toArray(this.props.children).filter(this.filterChildren).map(function (child, index) {
      var style = index === 0 ? undefined : subsequentItemStyle;
      return /*#__PURE__*/(
        React.createElement("div", {
          style: style,
          key: index
        }, child)
      );
    });
    return /*#__PURE__*/React.createElement("div", {
      "data-tid": GappedDataTids.vertical
    }, children);
  };
  _proto.renderHorizontal = function renderHorizontal() {
    var _this$props = this.props,
      children = _this$props.children,
      verticalAlign = _this$props.verticalAlign;
    var wrap = this.getProps().wrap;
    var gap = this.getGapValue();
    var itemStyle = _extends({
      display: 'inline-block',
      verticalAlign: verticalAlign
    }, wrap ? {
      marginLeft: gap,
      marginTop: gap
    } : {});
    var rootStyle = wrap ? {
      paddingTop: 1
    } : {};
    var contStyle = wrap ? {
      marginTop: -gap - 1,
      marginLeft: -gap
    } : {
      whiteSpace: 'nowrap'
    };
    return /*#__PURE__*/(
      React.createElement("div", {
        "data-tid": GappedDataTids.horizontal,
        style: rootStyle
      }, /*#__PURE__*/
      React.createElement("div", {
        style: contStyle
      }, React.Children.toArray(children).filter(this.filterChildren).map(function (child, index) {
        var marginLeft = index === 0 ? undefined : gap;
        return /*#__PURE__*/(
          React.createElement("span", {
            key: index,
            style: _extends({
              marginLeft: marginLeft
            }, itemStyle)
          }, child)
        );
      })))
    );
  };
  _proto.filterChildren = function filterChildren(child) {
    return Boolean(child) || typeof child === 'number';
  };
  return Gapped;
}(React.Component), _Gapped.__KONTUR_REACT_UI__ = 'Gapped', _Gapped.displayName = 'Gapped', _Gapped.defaultProps = {
  wrap: false,
  vertical: false,
  verticalAlign: 'baseline'
}, _Gapped)) || _class;