/**
 * amis-ui v6.11.0-beta.8
 * Copyright 2018-2025 fex
 */

import { __read } from 'tslib';
import React__default, { useState } from 'react';
import { themeable, localeable } from 'amis-core';
import { Icon } from './icons.js';

function TimelineItem(props) {
    var _a;
    var time = props.time, title = props.title, detail = props.detail, detailCollapsedText = props.detailCollapsedText, detailExpandedText = props.detailExpandedText, color = props.color, icon = props.icon, iconClassName = props.iconClassName, timeClassName = props.timeClassName, titleClassName = props.titleClassName, detailClassName = props.detailClassName, cx = props.classnames, __ = props.translate, classPrefix = props.classPrefix, key = props.key;
    var _b = __read(useState(false), 2), detailVisible = _b[0], setDetailVisible = _b[1];
    var renderDetail = function (detail, detailCollapsedText, detailExpandedText) {
        if (detailCollapsedText === void 0) { detailCollapsedText = __('Timeline.collapseText'); }
        if (detailExpandedText === void 0) { detailExpandedText = __('Timeline.expandText'); }
        return (React__default.createElement(React__default.Fragment, null,
            React__default.createElement("div", { className: cx('TimelineItem-detail-button'), onClick: function () { return setDetailVisible(!detailVisible); } },
                detailVisible ? detailCollapsedText : detailExpandedText,
                React__default.createElement("div", { className: cx('TimelineItem-detail-arrow', "".concat(detailVisible && 'TimelineItem-detail-arrow-top')) },
                    React__default.createElement(Icon, { icon: "down-arrow-bold" }))),
            React__default.createElement("div", { className: cx("".concat(detailVisible
                    ? 'TimelineItem-detail-visible'
                    : 'TimelineItem-detail-invisible'), detailClassName) }, detail)));
    };
    // 判断是否为颜色值
    var isColorVal = color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
    // 取level级颜色
    var levelColor = !isColorVal && color;
    return (React__default.createElement("div", { className: cx('TimelineItem'), key: key },
        React__default.createElement("div", { className: cx('TimelineItem-axle') },
            React__default.createElement("div", { className: cx('TimelineItem-line') }),
            icon ? (React__default.createElement("div", { className: cx('TimelineItem-icon', iconClassName) },
                React__default.createElement(Icon, { cx: cx, icon: icon, className: "icon", classPrefix: classPrefix }))) : (React__default.createElement("div", { className: cx('TimelineItem-round', iconClassName, (_a = {},
                    _a["TimelineItem-round--".concat(levelColor)] = !!levelColor,
                    _a)), style: isColorVal ? { backgroundColor: color } : undefined }))),
        React__default.createElement("div", { className: cx('TimelineItem-content') },
            React__default.createElement("div", { className: cx('TimelineItem-time', timeClassName) }, time),
            React__default.createElement("div", { className: cx('TimelineItem-title', titleClassName) }, title),
            detail && (React__default.createElement("div", { className: cx('TimelineItem-detail') }, renderDetail(detail, detailCollapsedText, detailExpandedText))))));
}
var TimelineItem$1 = themeable(localeable(TimelineItem));

export { TimelineItem, TimelineItem$1 as default };
