'use strict';

var _extends = require('@babel/runtime/helpers/extends');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var React = require('react');
var react = require('@carbon/react');
var PropTypes = require('prop-types');
var Settings = require('../../constants/Settings.js');
var utils = require('./utils.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var _extends__default = /*#__PURE__*/_interopDefault(_extends);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWithoutProperties);
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);

var _excluded = ["children", "onChange", "i18n"];
var iotPrefix = Settings.settings.iotPrefix;
var baseClass = "".concat(iotPrefix, "--rule-builder-wrap");
var RuleBuilderTags = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
  var _children$;
  var children = _ref.children,
    onChange = _ref.onChange,
    i18n = _ref.i18n,
    props = _objectWithoutProperties__default.default(_ref, _excluded);
  var tagContainerRef = React__namespace.useRef(null);
  var inputRef = React__namespace.useRef(null);
  var _React$useState = React__namespace.useState(0),
    _React$useState2 = _slicedToArray__default.default(_React$useState, 2),
    paddingLeft = _React$useState2[0],
    setPaddingLeft = _React$useState2[1];
  var _React$useState3 = React__namespace.useState(false),
    _React$useState4 = _slicedToArray__default.default(_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__namespace.useEffect(function () {
    var _window;
    if ((_window = window) !== null && _window !== void 0 && _window.IntersectionObserver) {
      var observer = new IntersectionObserver(function (_ref2) {
        var _ref3 = _slicedToArray__default.default(_ref2, 1),
          entry = _ref3[0];
        return setIsVisible(entry.isIntersecting);
      });
      observer.observe(tagContainerRef.current);
      return function () {
        observer.disconnect();
      };
    }
  }, [tagLength]);
  React__namespace.useLayoutEffect(function () {
    if (tagContainerRef.current && isVisible) {
      var _tagContainerRef$curr = tagContainerRef.current.getBoundingClientRect(),
        width = _tagContainerRef$curr.width;
      setPaddingLeft(width);
    }
  }, [isVisible, tagLength]);
  var handleKeyUp = React__namespace.useCallback(function (e) {
    if (onChange && (e.key === 'Enter' || e.key === ',')) {
      onChange(utils.slugify(e.target.value), 'TAGS');
      setIsVisible(false);
      inputRef.current.value = '';
    }
  }, [onChange]);
  return /*#__PURE__*/React__namespace.createElement("div", _extends__default.default({}, props, {
    ref: ref
  }), /*#__PURE__*/React__namespace.createElement(react.TextInput, {
    ref: inputRef,
    type: "text",
    id: "rule-builder-tags-input",
    light: true,
    labelText: i18n.tagsLabel,
    onKeyUp: handleKeyUp,
    style: {
      paddingLeft: paddingLeft
    }
  }), /*#__PURE__*/React__namespace.createElement("div", {
    className: "".concat(baseClass, "--tag-container"),
    ref: tagContainerRef
  }, children));
});
RuleBuilderTags.propTypes = {
  onChange: PropTypes__default.default.func,
  i18n: PropTypes__default.default.shape({
    tagsLabel: PropTypes__default.default.string
  }),
  children: PropTypes__default.default.oneOfType([PropTypes__default.default.arrayOf(PropTypes__default.default.node), PropTypes__default.default.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;

module.exports = RuleBuilderTags$1;
