import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PureComponent } from 'react';
import cx from 'classnames';
import Popover from '../popover';
import { TimelineDot } from './Dot';
var TimelineItemOptionalPop = function (_a) {
    var children = _a.children, tip = _a.tip, position = _a.position, popoverRef = _a.popoverRef;
    if (tip) {
        return (_jsxs(Popover, __assign({ ref: popoverRef, className: "zent-timeline-tip", position: position, cushion: 20 }, { children: [_jsx(Popover.Trigger.Hover, { children: children }, void 0), _jsx(Popover.Content, { children: tip }, void 0)] }), void 0));
    }
    return children;
};
var TimelineItem = (function (_super) {
    __extends(TimelineItem, _super);
    function TimelineItem() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.popover = null;
        _this.mousePosition = {
            x: 0,
            y: 0,
        };
        _this.onMouseMove = function (e) {
            _this.mousePosition.x = e.clientX;
            _this.mousePosition.y = e.clientY;
            _this.popover && _this.popover.adjustPosition();
        };
        _this.position = function (_a) {
            var anchorRect = _a.anchorRect, contentRect = _a.contentRect, containerRect = _a.containerRect;
            var type = _this.props.type;
            var x = anchorRect.left;
            var middle = (anchorRect.top + anchorRect.bottom) / 2;
            var y = middle - contentRect.height / 2;
            return {
                style: type === 'horizontal'
                    ? {
                        position: 'absolute',
                        left: Math.round(_this.mousePosition.x - containerRect.left) + "px",
                        top: Math.round(y - 40) + "px",
                    }
                    : {
                        position: 'absolute',
                        left: Math.round(x + 20) + "px",
                        top: Math.round(_this.mousePosition.y - containerRect.top) + "px",
                    },
            };
        };
        _this.popoverRef = function (el) { return (_this.popover = el); };
        return _this;
    }
    TimelineItem.prototype.render = function () {
        var _a;
        var _b = this.props, size = _b.size, _c = _b.showLabel, showLabel = _c === void 0 ? true : _c, _d = _b.showDot, showDot = _d === void 0 ? true : _d, color = _b.color, label = _b.label, tip = _b.tip, className = _b.className, style = _b.style, type = _b.type, lineColor = _b.lineColor, dotColor = _b.dotColor;
        var key = type === 'vertical' ? 'height' : 'width';
        return (_jsxs("li", __assign({ className: cx('zent-timeline-item', className), style: style, onMouseMove: this.onMouseMove, "data-zv": 'v10.0.12' }, { children: [_jsx(TimelineItemOptionalPop, __assign({ tip: tip, position: this.position, popoverRef: this.popoverRef }, { children: _jsx("div", __assign({ className: "zent-timeline-item-hover", "data-zv": 'v10.0.12' }, { children: _jsx("div", __assign({ className: "zent-timeline-item-line", style: (_a = {},
                                _a[key] = size,
                                _a.backgroundColor = color || lineColor,
                                _a), "data-zv": 'v10.0.12' }, { children: showDot && _jsx(TimelineDot, { color: color || dotColor }, void 0) }), void 0) }), void 0) }), void 0), showLabel && (_jsx("label", __assign({ className: "zent-timeline-item-label", "data-zv": 'v10.0.12' }, { children: label }), void 0))] }), void 0));
    };
    TimelineItem.defaultProps = {
        showLabel: true,
        showDot: true,
        lineColor: '#f2f3f5',
        dotColor: '#155BD4',
    };
    return TimelineItem;
}(PureComponent));
export { TimelineItem };
