"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
var ReactDOM = require("react-dom");
/* tslint:enable:no-unused-variable */
var PropTypes = require("prop-types");
var Utilities_1 = require("../../Utilities");
var Sticky_types_1 = require("./Sticky.types");
var Sticky = /** @class */ (function (_super) {
    tslib_1.__extends(Sticky, _super);
    function Sticky(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isStickyTop: false,
            isStickyBottom: false
        };
        return _this;
    }
    Sticky.prototype.componentDidMount = function () {
        if (!this.context.scrollablePane) {
            throw new TypeError('Expected Sticky to be mounted within ScrollablePane');
        }
        var scrollablePane = this.context.scrollablePane;
        scrollablePane.subscribe(this._onScrollEvent);
        this.content = document.createElement('div');
        this.content.style.background = this.props.stickyBackgroundColor || this._getBackground();
        ReactDOM.render(React.createElement("div", null, this.props.children), this.content);
        this.refs.root.appendChild(this.content);
        this.context.scrollablePane.notifySubscribers(true);
    };
    Sticky.prototype.componentWillUnmount = function () {
        var _this = this;
        var _a = this.state, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom;
        var scrollablePane = this.context.scrollablePane;
        if (isStickyTop) {
            this._resetSticky(function () {
                scrollablePane.removeStickyHeader(_this);
            });
        }
        if (isStickyBottom) {
            this._resetSticky(function () {
                scrollablePane.removeStickyFooter(_this);
            });
        }
        scrollablePane.unsubscribe(this._onScrollEvent);
    };
    Sticky.prototype.componentDidUpdate = function (prevProps, prevState) {
        var _this = this;
        var _a = this.state, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom;
        var scrollablePane = this.context.scrollablePane;
        if (this.props.children !== prevProps.children) {
            ReactDOM.render(React.createElement("div", null, this.props.children), this.content);
        }
        if (isStickyTop && !prevState.isStickyTop) {
            this._setSticky(function () {
                scrollablePane.addStickyHeader(_this);
            });
        }
        else if (!isStickyTop && prevState.isStickyTop) {
            this._resetSticky(function () {
                scrollablePane.removeStickyHeader(_this);
            });
        }
        if (isStickyBottom && !prevState.isStickyBottom) {
            this._setSticky(function () {
                scrollablePane.addStickyFooter(_this);
            });
        }
        else if (!isStickyBottom && prevState.isStickyBottom) {
            this._resetSticky(function () {
                scrollablePane.removeStickyFooter(_this);
            });
        }
    };
    Sticky.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        var _a = this.state, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom, placeholderHeight = _a.placeholderHeight;
        return isStickyTop !== nextState.isStickyTop ||
            isStickyBottom !== nextState.isStickyBottom ||
            placeholderHeight !== nextState.placeholderHeight ||
            this.props.children !== nextProps.children;
    };
    Sticky.prototype.setPlaceholderHeight = function (height) {
        this.setState({
            placeholderHeight: height
        });
    };
    Sticky.prototype.render = function () {
        var _a = this.state, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom, placeholderHeight = _a.placeholderHeight;
        var isSticky = isStickyTop || isStickyBottom;
        return (React.createElement("div", { ref: 'root' },
            React.createElement("div", { ref: 'placeholder', style: { height: (isSticky ? placeholderHeight : 0) } })));
    };
    Sticky.prototype._onScrollEvent = function (headerBound, footerBound) {
        var _a = this.refs.root.getBoundingClientRect(), top = _a.top, bottom = _a.bottom;
        var _b = this.state, isStickyTop = _b.isStickyTop, isStickyBottom = _b.isStickyBottom;
        var stickyPosition = this.props.stickyPosition;
        var canStickyHeader = stickyPosition === Sticky_types_1.StickyPositionType.Both || stickyPosition === Sticky_types_1.StickyPositionType.Header;
        var canStickyFooter = stickyPosition === Sticky_types_1.StickyPositionType.Both || stickyPosition === Sticky_types_1.StickyPositionType.Footer;
        this.setState({
            isStickyTop: canStickyHeader && ((!isStickyTop && top <= headerBound.bottom) || (isStickyTop && bottom < headerBound.bottom)),
            isStickyBottom: canStickyFooter && ((!isStickyBottom && bottom >= footerBound.top) || (isStickyBottom && top > footerBound.top))
        });
    };
    Sticky.prototype._setSticky = function (callback) {
        if (this.content.parentElement) {
            this.content.parentElement.removeChild(this.content);
        }
        callback();
    };
    Sticky.prototype._resetSticky = function (callback) {
        var _this = this;
        this.refs.root.appendChild(this.content);
        setTimeout(function () {
            if (_this.props.stickyClassName) {
                _this.content.children[0].classList.remove(_this.props.stickyClassName);
            }
        }, 1);
        callback();
    };
    // Gets background of nearest parent element that has a declared background-color attribute
    Sticky.prototype._getBackground = function () {
        var curr = this.refs.root;
        while (window.getComputedStyle(curr).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ||
            window.getComputedStyle(curr).getPropertyValue('background-color') === 'transparent') {
            if (curr.tagName === 'HTML') {
                // Fallback color if no element has a declared background-color attribute
                return null;
            }
            if (curr.parentElement) {
                curr = curr.parentElement;
            }
        }
        return window.getComputedStyle(curr).getPropertyValue('background-color');
    };
    Sticky.defaultProps = {
        stickyPosition: Sticky_types_1.StickyPositionType.Both
    };
    Sticky.contextTypes = {
        scrollablePane: PropTypes.object
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Sticky.prototype, "componentDidMount", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Sticky.prototype, "_onScrollEvent", null);
    return Sticky;
}(Utilities_1.BaseComponent));
exports.Sticky = Sticky;
//# sourceMappingURL=Sticky.js.map