import { __assign } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, useRef } from 'react';
import cx from 'classnames';
import Icon from '../../icon';
import InlineLoading from '../../loading/InlineLoading';
var iconTypeMap = {
    info: 'info-circle',
    warning: 'warning',
    success: 'check-circle',
    error: 'close-circle',
};
export var AlertItem = forwardRef(function (props, ref) {
    var extraContent = props.extraContent, classItemName = props.classItemName, title = props.title, description = props.description, children = props.children, loading = props.loading, type = props.type, closable = props.closable, icon = props.icon, closeIconColor = props.closeIconColor, closeContent = props.closeContent, onAlertItemClose = props.onAlertItemClose;
    var propsRef = useRef(props);
    propsRef.current = props;
    var renderContent = useMemo(function () {
        return children ? (children) : (_jsxs(_Fragment, { children: [title && _jsx("h3", __assign({ className: "zent-alert-item-content__title", "data-zv": 'v10.0.11' }, { children: title }), void 0), description && (_jsx("p", __assign({ className: "zent-alert-item-content__description", "data-zv": 'v10.0.11' }, { children: description }), void 0))] }, void 0));
    }, [children, description, title]);
    var renderCloseNode = useMemo(function () {
        var onClose = propsRef.current.onClose;
        var colorStyle = closeIconColor ? { color: closeIconColor } : {};
        return closable ? (_jsx("div", __assign({ className: "zent-alert-item-close-wrapper", onClick: function (e) {
                onClose === null || onClose === void 0 ? void 0 : onClose();
                onAlertItemClose && onAlertItemClose();
                e.stopPropagation();
            }, "data-zv": 'v10.0.11' }, { children: closeContent !== null && closeContent !== void 0 ? closeContent : (_jsx(Icon, { type: "close", className: "zent-alert-item-close-btn", style: colorStyle }, void 0)) }), void 0)) : null;
    }, [closable, closeContent, closeIconColor, onAlertItemClose]);
    var renderIcon = useMemo(function () {
        if (loading) {
            return (_jsx(InlineLoading, { className: "zent-alert-item-icon", loading: true, icon: "circle", iconSize: 16 }, void 0));
        }
        if (icon === null || icon === false)
            return null;
        if (icon) {
            return _jsx("span", __assign({ className: "zent-alert-item-custom-icon", "data-zv": 'v10.0.11' }, { children: icon }), void 0);
        }
        if (type in iconTypeMap) {
            return (_jsx(Icon, { className: "zent-alert-item-icon", type: iconTypeMap[type] }, void 0));
        }
        return null;
    }, [loading, type, icon]);
    return (_jsxs("div", __assign({ className: cx('zent-alert-item', classItemName), ref: ref, "data-zv": 'v10.0.11' }, { children: [renderIcon, _jsx("div", __assign({ className: "zent-alert-item-content", "data-zv": 'v10.0.11' }, { children: renderContent }), void 0), extraContent && (_jsx("div", __assign({ className: "zent-alert-item-extra-content", "data-zv": 'v10.0.11' }, { children: extraContent }), void 0)), renderCloseNode] }), void 0));
});
AlertItem.displayName = 'AlertItem';
export default AlertItem;
