var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import React from 'react';
import throttle from 'lodash.throttle';
import { isInstanceOf } from '../../lib/isInstanceOf.js';
import * as LayoutEvents from '../../lib/LayoutEvents.js';
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
import { getDOMRect } from '../../lib/dom/getDOMRect.js';
import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
import { getStyles } from './Indicator.styles.js';
import { TabsContext } from './TabsContext.js';
import { TabsDataTids } from './Tabs.js';
var Indicator = /** @class */ (function (_super) {
    __extends(Indicator, _super);
    function Indicator() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.context = _this.context;
        _this.state = {
            styles: {},
        };
        _this.eventListener = null;
        _this.removeTabUpdatesListener = null;
        _this.reflow = throttle(function () {
            var _a = _this.context, getTab = _a.getTab, activeTab = _a.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;
    }
    Indicator.prototype.componentDidMount = function () {
        this.eventListener = LayoutEvents.addListener(this.reflow, this.globalObject);
        this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);
        this.reflow();
    };
    Indicator.prototype.componentWillUnmount = function () {
        this.reflow.cancel();
        if (this.eventListener) {
            this.eventListener.remove();
        }
        if (this.removeTabUpdatesListener) {
            this.removeTabUpdatesListener();
        }
    };
    Indicator.prototype.componentDidUpdate = function () {
        this.reflow();
    };
    Indicator.prototype.render = function () {
        var _this = this;
        this.styles = getStyles(this.emotion);
        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
            _this.theme = theme;
            return _this.renderMain();
        }));
    };
    Indicator.prototype.renderMain = function () {
        var _a = this.context, getTab = _a.getTab, activeTab = _a.activeTab;
        var node = getTab(activeTab);
        var indicators = (node && node.getIndicators && node.getIndicators()) || {
            error: false,
            warning: false,
            success: false,
            primary: false,
            disabled: false,
        };
        return (React.createElement("div", { "data-tid": TabsDataTids.indicatorRoot, className: this.cx(this.styles.root(this.theme), indicators.primary && this.styles.primary(this.theme), indicators.success && this.styles.success(this.theme), indicators.warning && this.styles.warning(this.theme), indicators.error && this.styles.error(this.theme), this.props.className), style: this.state.styles, ref: this.setRootNode }));
    };
    Indicator.prototype.getStyles = function (node) {
        var htmlNode = getRootNode(node);
        if (isInstanceOf(htmlNode, this.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 {};
    };
    Indicator.contextType = TabsContext;
    Indicator = __decorate([
        withRenderEnvironment,
        rootNode
    ], Indicator);
    return Indicator;
}(React.Component));
export { Indicator };
//# sourceMappingURL=Indicator.js.map