import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import * as React from 'react';
import { TextInput } from '@carbon/react';
import PropTypes from 'prop-types';
import { settings } from '../../constants/Settings.js';
import { slugify } from './utils.js';

var _excluded = ["children", "onChange", "i18n"];
var iotPrefix = settings.iotPrefix;
var baseClass = "".concat(iotPrefix, "--rule-builder-wrap");
var RuleBuilderTags = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var _children$;
  var children = _ref.children,
    onChange = _ref.onChange,
    i18n = _ref.i18n,
    props = _objectWithoutProperties(_ref, _excluded);
  var tagContainerRef = React.useRef(null);
  var inputRef = React.useRef(null);
  var _React$useState = React.useState(0),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    paddingLeft = _React$useState2[0],
    setPaddingLeft = _React$useState2[1];
  var _React$useState3 = React.useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    isVisible = _React$useState4[0],
    setIsVisible = _React$useState4[1];
  var tagLength = children === null || children === void 0 || (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.length;

  // eslint-disable-next-line consistent-return
  React.useEffect(function () {
    var _window;
    if ((_window = window) !== null && _window !== void 0 && _window.IntersectionObserver) {
      var observer = new IntersectionObserver(function (_ref2) {
        var _ref3 = _slicedToArray(_ref2, 1),
          entry = _ref3[0];
        return setIsVisible(entry.isIntersecting);
      });
      observer.observe(tagContainerRef.current);
      return function () {
        observer.disconnect();
      };
    }
  }, [tagLength]);
  React.useLayoutEffect(function () {
    if (tagContainerRef.current && isVisible) {
      var _tagContainerRef$curr = tagContainerRef.current.getBoundingClientRect(),
        width = _tagContainerRef$curr.width;
      setPaddingLeft(width);
    }
  }, [isVisible, tagLength]);
  var handleKeyUp = React.useCallback(function (e) {
    if (onChange && (e.key === 'Enter' || e.key === ',')) {
      onChange(slugify(e.target.value), 'TAGS');
      setIsVisible(false);
      inputRef.current.value = '';
    }
  }, [onChange]);
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    ref: ref
  }), /*#__PURE__*/React.createElement(TextInput, {
    ref: inputRef,
    type: "text",
    id: "rule-builder-tags-input",
    light: true,
    labelText: i18n.tagsLabel,
    onKeyUp: handleKeyUp,
    style: {
      paddingLeft: paddingLeft
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(baseClass, "--tag-container"),
    ref: tagContainerRef
  }, children));
});
RuleBuilderTags.propTypes = {
  onChange: PropTypes.func,
  i18n: PropTypes.shape({
    tagsLabel: PropTypes.string
  }),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
RuleBuilderTags.defaultProps = {
  onChange: null,
  i18n: {
    tagsLabel: 'Tags (optional)'
  }
};
RuleBuilderTags.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RuleBuilderTags",
  "props": {
    "onChange": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  tagsLabel: 'Tags (optional)',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "tagsLabel": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "children": {
      "description": "",
      "type": {
        "name": "union",
        "value": [{
          "name": "arrayOf",
          "value": {
            "name": "node"
          }
        }, {
          "name": "node"
        }]
      },
      "required": true
    }
  }
};
var RuleBuilderTags$1 = RuleBuilderTags;

export { RuleBuilderTags$1 as default };
