import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from 'classnames';
import { useCallback, useMemo } from 'react';
import { Icon } from '../../../icon';
import { Progress } from '../../../progress';
import { useHover } from '../../../utils/hooks/useHover';
import { FILE_UPLOAD_STATUS } from '../../constants';
import { useItemHandler } from '../../hooks/item-handler';
var ImageUploadItem = function (props) {
    var _a;
    var i18n = props.i18n, item = props.item, onPreview = props.onPreview;
    var isFailed = item.status === FILE_UPLOAD_STATUS.failed;
    var _b = useHover(), isHover = _b.isHover, onMouseEnter = _b.onMouseEnter, onMouseLeave = _b.onMouseLeave;
    var _c = useItemHandler(props), deleteHandler = _c.deleteHandler, retryHandler = _c.retryHandler;
    var previewHandler = useCallback(function (e) {
        e.stopPropagation();
        onPreview(item);
    }, [onPreview, item]);
    var cls = cn('zent-image-upload-item', (_a = {},
        _a['zent-image-upload-item__failed'] = isFailed,
        _a['zent-image-upload-item__hover'] = isHover,
        _a));
    var failedFallback = useMemo(function () {
        var _a;
        var failedIconType = isHover ? 'upload' : 'warning';
        var failedText = isHover ? i18n.retry : i18n.failed;
        var failedCls = cn('zent-image-upload-item-backdrop', 'zent-image-upload-item-backdrop__white', (_a = {},
            _a['zent-image-upload-item-backdrop__failed'] = !isHover,
            _a['zent-image-upload-item-backdrop__retry'] = isHover,
            _a));
        return (isFailed && (_jsxs("div", __assign({ className: failedCls, onClick: retryHandler, "data-zv": 'v10.0.11' }, { children: [_jsx(Icon, { className: "zent-image-upload-item-icon", type: failedIconType }, void 0), _jsx("span", __assign({ className: "zent-image-upload-item-backdrop-text", "data-zv": 'v10.0.11' }, { children: failedText }), void 0)] }), void 0)));
    }, [isHover, i18n, isFailed, retryHandler]);
    return (_jsxs("li", __assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: cls, "data-zv": 'v10.0.11' }, { children: [_jsx("img", { className: "zent-image-upload-item-thumb", src: item.thumbSrc || item.src, alt: item.name, onClick: previewHandler, "data-zv": 'v10.0.11' }, void 0), item.status === FILE_UPLOAD_STATUS.uploading && (_jsx("div", __assign({ className: "zent-image-upload-item-backdrop zent-image-upload-item-backdrop__black", "data-zv": 'v10.0.11' }, { children: _jsx(Progress, { width: 48, showInfo: false, className: "zent-image-upload-item-progress", strokeWidth: 4, status: "normal", percent: item.percent }, void 0) }), void 0)), failedFallback, _jsx("i", { className: "zent-image-upload-item-delete-bg", "data-zv": 'v10.0.11' }, void 0), _jsx(Icon, { type: "close-circle", className: "zent-image-upload-item-delete", onClick: deleteHandler }, void 0)] }), item.id));
};
export default ImageUploadItem;
