var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../FocusZone', '../../ContextualMenu', '../../common/DirectionalHint', '../../utilities/eventGroup/EventGroup', '../../utilities/rtl', '../../utilities/css', './Breadcrumb.scss'], function (require, exports, React, FocusZone_1, ContextualMenu_1, DirectionalHint_1, EventGroup_1, rtl_1, css_1) {
    "use strict";
    var OVERFLOW_KEY = 'overflow';
    var OVERFLOW_WIDTH = 44;
    var _instance = 0;
    var Breadcrumb = (function (_super) {
        __extends(Breadcrumb, _super);
        function Breadcrumb(props) {
            _super.call(this, props);
            this._events = new EventGroup_1.EventGroup(this);
            this.state = this._getStateFromProps(props);
        }
        Breadcrumb.prototype.componentDidMount = function () {
            this._updateItemMeasurements();
            this._updateRenderedItems();
            this._events.on(window, 'resize', this._updateRenderedItems);
        };
        Breadcrumb.prototype.componentWillUnmount = function () {
            this._events.dispose();
        };
        Breadcrumb.prototype.componentWillReceiveProps = function (nextProps) {
            this.setState(this._getStateFromProps(nextProps));
            this._breadcrumbItemWidths = null;
        };
        Breadcrumb.prototype.componentDidUpdate = function (prevProps, prevStates) {
            if (!this._breadcrumbItemWidths) {
                this._updateItemMeasurements();
                this._updateRenderedItems();
            }
        };
        Breadcrumb.prototype.render = function () {
            var _this = this;
            var className = this.props.className;
            var _a = this.state, isOverflowOpen = _a.isOverflowOpen, overflowAnchor = _a.overflowAnchor, renderedItems = _a.renderedItems, renderedOverflowItems = _a.renderedOverflowItems, internalId = _a.internalId;
            var overflowMenuId = internalId + '-overflow';
            return (React.createElement("div", {className: css_1.css('ms-Breadcrumb', className), ref: 'renderingArea'}, React.createElement(FocusZone_1.FocusZone, {direction: FocusZone_1.FocusZoneDirection.horizontal}, React.createElement("ul", {className: 'ms-Breadcrumb-list'}, renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", {className: 'ms-Breadcrumb-overflow', key: OVERFLOW_KEY, ref: OVERFLOW_KEY}, React.createElement("div", {className: 'ms-Breadcrumb-overflowButton ms-Icon ms-Icon--ellipsis', onClick: this._onOverflowClicked.bind(this), "data-is-focusable": true, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null}), React.createElement("i", {className: css_1.css('ms-Breadcrumb-chevron ms-Icon', rtl_1.getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight')}))) : (null), renderedItems.map(function (item, index) { return (React.createElement("li", {className: 'ms-Breadcrumb-listItem', key: item.key || String(index), ref: item.key || String(index)}, React.createElement("a", {className: 'ms-Breadcrumb-itemLink', onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null, href: item.href, role: item.onClick ? 'button' : 'link'}, item.text), React.createElement("i", {className: css_1.css('ms-Breadcrumb-chevron ms-Icon', rtl_1.getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight')}))); }))), isOverflowOpen ? (React.createElement(ContextualMenu_1.ContextualMenu, {targetElement: overflowAnchor, isBeakVisible: true, items: renderedOverflowItems.map(function (item, index) { return ({
                name: item.text,
                key: item.key,
                onClick: _this._onBreadcrumbClicked.bind(_this, item),
                href: item.href
            }); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed.bind(this)})) : (null)));
        };
        Breadcrumb.prototype._onOverflowClicked = function (ev) {
            this.setState({
                'isOverflowOpen': !this.state.isOverflowOpen,
                'overflowAnchor': ev.currentTarget
            });
        };
        Breadcrumb.prototype._onOverflowDismissed = function (ev) {
            this.setState({
                'isOverflowOpen': false,
                'overflowAnchor': null
            });
        };
        Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) {
            if (item.onClick) {
                item.onClick(item.key);
            }
            this.setState({
                'isOverflowOpen': false
            });
        };
        Breadcrumb.prototype._updateItemMeasurements = function () {
            var items = this.props.items;
            if (!this._breadcrumbItemWidths) {
                this._breadcrumbItemWidths = {};
            }
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                if (!this._breadcrumbItemWidths[item.key]) {
                    var el = this.refs[item.key];
                    this._breadcrumbItemWidths[item.key] = el.getBoundingClientRect().width;
                }
            }
        };
        Breadcrumb.prototype._updateRenderedItems = function () {
            var _a = this.props, items = _a.items, maxDisplayedItems = _a.maxDisplayedItems;
            var renderingArea = this.refs.renderingArea;
            var renderedItems = [];
            var renderedOverflowItems = [].concat(items);
            var consumedWidth = 0;
            var style = window.getComputedStyle(renderingArea);
            var availableWidth = renderingArea.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
            availableWidth -= OVERFLOW_WIDTH;
            var i;
            var minIndex = Math.max(0, renderedOverflowItems.length - maxDisplayedItems);
            for (i = renderedOverflowItems.length - 1; i >= minIndex; i--) {
                var item = renderedOverflowItems[i];
                var itemWidth = this._breadcrumbItemWidths[item.key];
                if ((consumedWidth + itemWidth) >= availableWidth) {
                    break;
                }
                else {
                    consumedWidth += itemWidth;
                }
            }
            renderedItems = renderedOverflowItems.splice(i + 1);
            this.setState({
                isOverflowOpen: this.state.isOverflowOpen,
                overflowAnchor: this.state.overflowAnchor,
                renderedItems: renderedItems,
                renderedOverflowItems: renderedOverflowItems,
            });
        };
        Breadcrumb.prototype._getStateFromProps = function (nextProps) {
            return {
                isOverflowOpen: false,
                overflowAnchor: null,
                renderedItems: nextProps.items || [],
                renderedOverflowItems: null,
                internalId: 'Breadcrumb-' + _instance++
            };
        };
        Breadcrumb.defaultProps = {
            items: [],
            maxDisplayedItems: 999
        };
        return Breadcrumb;
    }(React.Component));
    exports.Breadcrumb = Breadcrumb;
});
