"use strict";
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 __());
};
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;
};
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var ContextualMenu_1 = require("../../ContextualMenu");
var Link_1 = require("../../Link");
var DirectionalHint_1 = require("../../common/DirectionalHint");
var Breadcrumb_scss_1 = require("./Breadcrumb.scss");
var OVERFLOW_KEY = 'overflow';
var OVERFLOW_WIDTH = 44;
var Breadcrumb = (function (_super) {
    __extends(Breadcrumb, _super);
    function Breadcrumb(props) {
        var _this = _super.call(this, props) || this;
        _this._id = Utilities_1.getId('Breadcrumb');
        _this.state = _this._getStateFromProps(props);
        return _this;
    }
    Breadcrumb.prototype.componentDidMount = function () {
        this._updateItemMeasurements();
        this._updateRenderedItems();
        this._events.on(window, 'resize', this._updateRenderedItems);
    };
    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;
        var overflowMenuId = this._id + '-overflow';
        var _b = this.props.onRenderItem, onRenderItem = _b === void 0 ? this._onRenderItem : _b;
        return (React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb', className, Breadcrumb_scss_1.default.root), ref: 'renderingArea' },
            React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
                React.createElement("ul", { className: Utilities_1.css('ms-Breadcrumb-list', Breadcrumb_scss_1.default.list) },
                    renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-overflow', Breadcrumb_scss_1.default.overflow), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
                        React.createElement("div", { className: Utilities_1.css('ms-Breadcrumb-overflowButton ms-Icon ms-Icon--More', Breadcrumb_scss_1.default.overflowButton), onClick: this._onOverflowClicked, "data-is-focusable": true, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null }),
                        React.createElement("i", { className: Utilities_1.css('ms-Breadcrumb-chevron ms-Icon', Breadcrumb_scss_1.default.chevron, Utilities_1.getRTL() ? 'ms-Icon--ChevronLeft' : 'ms-Icon--ChevronRight') }))) : (null),
                    renderedItems.map(function (item, index) { return (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-listItem', Breadcrumb_scss_1.default.listItem), key: item.key || String(index), ref: item.key || String(index) },
                        onRenderItem(item, _this._defaultRenderItem),
                        React.createElement("i", { className: Utilities_1.css('ms-Breadcrumb-chevron ms-Icon', Breadcrumb_scss_1.default.chevron, Utilities_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: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null,
                    href: item.href
                }); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed })) : (null)));
    };
    Breadcrumb.prototype._onRenderItem = function (item, defaultRender) {
        return this._defaultRenderItem(item);
    };
    Breadcrumb.prototype._defaultRenderItem = function (item) {
        if (item.onClick || item.href) {
            return (React.createElement(Link_1.Link, { className: Utilities_1.css('ms-Breadcrumb-itemLink', Breadcrumb_scss_1.default.itemLink), href: item.href, onClick: this._onBreadcrumbClicked.bind(this, item) }, item.text));
        }
        else {
            return (React.createElement("span", { className: Utilities_1.css('ms-Breadcrumb-item', Breadcrumb_scss_1.default.item) }, item.text));
        }
    };
    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(ev, item);
        }
        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
        };
    };
    return Breadcrumb;
}(Utilities_1.BaseComponent));
Breadcrumb.defaultProps = {
    items: [],
    maxDisplayedItems: 999
};
__decorate([
    Utilities_1.autobind
], Breadcrumb.prototype, "_onRenderItem", null);
__decorate([
    Utilities_1.autobind
], Breadcrumb.prototype, "_defaultRenderItem", null);
__decorate([
    Utilities_1.autobind
], Breadcrumb.prototype, "_onOverflowClicked", null);
__decorate([
    Utilities_1.autobind
], Breadcrumb.prototype, "_onOverflowDismissed", null);
__decorate([
    Utilities_1.autobind
], Breadcrumb.prototype, "_onBreadcrumbClicked", null);
exports.Breadcrumb = Breadcrumb;

//# sourceMappingURL=Breadcrumb.js.map
