import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _class, _Indicator;
import React from 'react';
import throttle from 'lodash.throttle';
import { globalObject } from '@skbkontur/global-object';
import { isInstanceOf } from "../../../lib/isInstanceOf";
import * as LayoutEvents from "../../../lib/LayoutEvents";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { cx } from "../../../lib/theming/Emotion";
import { getRootNode, rootNode } from "../../../lib/rootNode";
import { getDOMRect } from "../../../lib/dom/getDOMRect";
import { styles } from "../Indicator.styles";
import { TabsContext } from "../TabsContext";
import { TabsDataTids } from "../Tabs";
export var Indicator = rootNode(_class = (_Indicator = /*#__PURE__*/function (_React$Component) {
  function Indicator() {
    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.context = _this.context;
    _this.state = {
      styles: {}
    };
    _this.eventListener = null;
    _this.removeTabUpdatesListener = null;
    _this.reflow = throttle(function () {
      var _this$context = _this.context,
        getTab = _this$context.getTab,
        activeTab = _this$context.activeTab;
      var node = getTab(activeTab);
      var nodeStyles = _this.getStyles(node);
      var stylesUpdated = ['left', 'top', 'width', 'height'].some(function (prop) {
        return nodeStyles[prop] !== _this.state.styles[prop];
      });
      if (stylesUpdated) {
        _this.setState({
          styles: nodeStyles
        });
      }
    }, 100);
    return _this;
  }
  _inheritsLoose(Indicator, _React$Component);
  var _proto = Indicator.prototype;
  _proto.componentDidMount = function componentDidMount() {
    this.eventListener = LayoutEvents.addListener(this.reflow);
    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);
    this.reflow();
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    this.reflow.cancel();
    if (this.eventListener) {
      this.eventListener.remove();
    }
    if (this.removeTabUpdatesListener) {
      this.removeTabUpdatesListener();
    }
  };
  _proto.componentDidUpdate = function componentDidUpdate() {
    this.reflow();
  };
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return _this2.renderMain();
    });
  };
  _proto.renderMain = function renderMain() {
    var _this$context2 = this.context,
      getTab = _this$context2.getTab,
      activeTab = _this$context2.activeTab;
    var node = getTab(activeTab);
    var indicators = node && node.getIndicators && node.getIndicators() || {
      error: false,
      warning: false,
      success: false,
      primary: false,
      disabled: false
    };
    return /*#__PURE__*/React.createElement("div", {
      "data-tid": TabsDataTids.indicatorRoot,
      className: cx(styles.root(this.theme), indicators.primary && styles.primary(this.theme), indicators.success && styles.success(this.theme), indicators.warning && styles.warning(this.theme), indicators.error && styles.error(this.theme), this.props.className),
      style: this.state.styles,
      ref: this.setRootNode
    });
  };
  _proto.getStyles = function getStyles(node) {
    var htmlNode = getRootNode(node);
    if (isInstanceOf(htmlNode, globalObject.HTMLElement)) {
      var rect = getDOMRect(htmlNode);
      if (this.props.vertical) {
        return {
          width: this.theme.tabBorderWidth,
          left: htmlNode.offsetLeft,
          top: htmlNode.offsetTop,
          height: rect.bottom - rect.top
        };
      }
      var tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;
      return {
        left: htmlNode.offsetLeft,
        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,
        width: rect.right - rect.left
      };
    }
    return {};
  };
  return Indicator;
}(React.Component), _Indicator.contextType = TabsContext, _Indicator)) || _class;