import { __assign, __extends, __spreadArray } from "tslib";
import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import { WindowResizeHandler } from '../utils/component/WindowResizeHandler';
import Item from './Item';
import Icon from '../icon';
import isEqual from '../utils/isEqual';
var MIN_FOLD_COUNT = 2;
var MOVE_ICON_WIDTH = 24;
var BREADCRUMB_ITEM_MARGIN_RIGHT = 24;
var MOVING_DURATION = 200;
var Breadcrumb = (function (_super) {
    __extends(Breadcrumb, _super);
    function Breadcrumb() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            isFolded: true,
            overflowLeft: false,
            overflowRight: false,
            contentStyleLeft: 0,
        };
        _this.breadcrumbRef = createRef();
        _this.contentRef = createRef();
        _this.isMoving = false;
        _this.getOverflowStatus = function () {
            var contentStyleLeft = _this.state.contentStyleLeft;
            if (!_this.breadcrumbWidth || !_this.contentWidth)
                return;
            if (contentStyleLeft < 0) {
                _this.setState({ overflowLeft: true });
            }
            else {
                _this.setState({ overflowLeft: false });
            }
            if (_this.breadcrumbWidth - contentStyleLeft < _this.contentWidth) {
                _this.setState({ overflowRight: true });
            }
            else {
                _this.setState({ overflowRight: false });
            }
        };
        _this.componentDidMount = function () {
            _this.getOverflowStatus();
        };
        _this.componentDidUpdate = function (prevProps) {
            if (!isEqual(_this.props.breads, prevProps.breads)) {
                _this.getOverflowStatus();
            }
        };
        _this.handleClickMoveLeft = function () {
            var contentStyleLeft = _this.state.contentStyleLeft;
            if (_this.isMoving)
                return;
            _this.isMoving = true;
            var contentEle = _this.contentRef.current;
            var moveStep = 0;
            for (var i = contentEle.childElementCount - 1; i >= 0; i--) {
                var childNode = contentEle.children.item(i);
                var childLeft = childNode.getBoundingClientRect().left;
                if (childLeft < _this.breadcrumbLeft) {
                    moveStep = _this.breadcrumbLeft - childLeft + MOVE_ICON_WIDTH;
                    break;
                }
            }
            var nextLeft = contentStyleLeft + moveStep < 0 ? contentStyleLeft + moveStep : 0;
            _this.setState({ contentStyleLeft: nextLeft }, function () {
                _this.getOverflowStatus();
                setTimeout(function () {
                    _this.isMoving = false;
                }, MOVING_DURATION);
            });
        };
        _this.handleClickMoveRight = function () {
            var contentStyleLeft = _this.state.contentStyleLeft;
            if (_this.isMoving)
                return;
            _this.isMoving = true;
            var contentEle = _this.contentRef.current;
            var moveStep = 0;
            for (var i = 0; i < contentEle.childElementCount; i++) {
                var childNode = contentEle.children.item(i);
                var childLeft = childNode.getBoundingClientRect().left;
                var childWidth = childNode.getBoundingClientRect().width;
                if (childLeft + childWidth > _this.breadcrumbLeft + _this.breadcrumbWidth) {
                    moveStep =
                        childLeft +
                            childWidth -
                            (_this.breadcrumbLeft + _this.breadcrumbWidth) +
                            MOVE_ICON_WIDTH -
                            BREADCRUMB_ITEM_MARGIN_RIGHT;
                    break;
                }
            }
            var offsetWidth = _this.contentWidth - _this.breadcrumbWidth;
            var nextLeft = Math.abs(contentStyleLeft - moveStep) > offsetWidth
                ? -offsetWidth
                : contentStyleLeft - moveStep;
            _this.setState({ contentStyleLeft: nextLeft }, function () {
                _this.getOverflowStatus();
                setTimeout(function () {
                    _this.isMoving = false;
                }, MOVING_DURATION);
            });
        };
        _this.unfoldBreads = function () {
            _this.setState({ isFolded: false }, function () {
                _this.getOverflowStatus();
            });
        };
        _this.getFoldItems = function () {
            var isFolded = _this.state.isFolded;
            var _a = _this.props, maxItemCount = _a.maxItemCount, breads = _a.breads;
            if (!maxItemCount || maxItemCount < MIN_FOLD_COUNT)
                return breads;
            if (!isFolded || (breads === null || breads === void 0 ? void 0 : breads.length) <= maxItemCount)
                return breads;
            var result = __spreadArray([], breads);
            result.splice(1, breads.length - maxItemCount, {
                name: '...',
                className: 'zent-breadcrumb__fold',
                onClick: _this.unfoldBreads,
            });
            return result;
        };
        return _this;
    }
    Object.defineProperty(Breadcrumb.prototype, "breadcrumbWidth", {
        get: function () {
            var breadcrumbEle = this.breadcrumbRef.current;
            return breadcrumbEle === null || breadcrumbEle === void 0 ? void 0 : breadcrumbEle.getBoundingClientRect().width;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Breadcrumb.prototype, "breadcrumbLeft", {
        get: function () {
            var breadcrumbEle = this.breadcrumbRef.current;
            return breadcrumbEle === null || breadcrumbEle === void 0 ? void 0 : breadcrumbEle.getBoundingClientRect().left;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(Breadcrumb.prototype, "contentWidth", {
        get: function () {
            var contentEle = this.contentRef.current;
            return contentEle === null || contentEle === void 0 ? void 0 : contentEle.getBoundingClientRect().width;
        },
        enumerable: false,
        configurable: true
    });
    Breadcrumb.prototype.render = function () {
        var _a = this.props, className = _a.className, _b = _a.children, children = _b === void 0 ? null : _b, style = _a.style;
        var _c = this.state, overflowLeft = _c.overflowLeft, overflowRight = _c.overflowRight, contentStyleLeft = _c.contentStyleLeft;
        var breadList = this.getFoldItems();
        var hasChildren = children || (breadList && breadList.length > 0);
        return (_jsxs("div", __assign({ className: cx('zent-breadcrumb', className, {
                'zent-breadcrumb--overflow-left': overflowLeft,
                'zent-breadcrumb--overflow-right': overflowRight,
            }), ref: this.breadcrumbRef, style: style, "data-zv": 'v10.0.12' }, { children: [overflowLeft && (_jsx(Icon, { type: "left", className: "zent-breadcrumb__move-left", onClick: this.handleClickMoveLeft }, void 0)), hasChildren && (_jsxs("div", __assign({ className: "zent-breadcrumb__content", style: { left: contentStyleLeft + "px" }, ref: this.contentRef, "data-zv": 'v10.0.12' }, { children: [children, breadList &&
                            breadList.length > 0 &&
                            breadList.map(function (item, index) {
                                return _createElement(Item, __assign({}, item, { key: index }));
                            })] }), void 0)), overflowRight && (_jsx(Icon, { type: "right", className: "zent-breadcrumb__move-right", onClick: this.handleClickMoveRight }, void 0)), _jsx(WindowResizeHandler, { onResize: this.getOverflowStatus }, void 0)] }), void 0));
    };
    Breadcrumb.defaultProps = {
        className: '',
        breads: [],
    };
    Breadcrumb.Item = Item;
    return Breadcrumb;
}(Component));
export { Breadcrumb };
export default Breadcrumb;
