"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const icons_1 = require("../../_internal/icons");
const button_1 = require("../../button");
const _internal_1 = require("../../_internal");
const _utils_1 = require("../../_utils");
const UploadProgress_1 = require("./UploadProgress");
const interface_1 = require("./interface");
exports.default = vue_1.defineComponent({
    name: 'UploadFile',
    props: {
        clsPrefix: {
            type: String,
            required: true
        },
        file: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        const NUpload = vue_1.inject(interface_1.uploadInjectionKey);
        const progressStatusRef = vue_1.computed(() => {
            const { file } = props;
            if (file.status === 'finished')
                return 'success';
            if (file.status === 'error')
                return 'error';
            return 'info';
        });
        const buttonTypeRef = vue_1.computed(() => {
            const { file } = props;
            if (file.status === 'error')
                return 'error';
            return undefined;
        });
        const showProgressRef = vue_1.computed(() => {
            const { file } = props;
            return file.status === 'uploading';
        });
        const showCancelButtonRef = vue_1.computed(() => {
            if (!NUpload.showCancelButtonRef.value)
                return false;
            const { file } = props;
            return ['uploading', 'pending', 'error'].includes(file.status);
        });
        const showRemoveButtonRef = vue_1.computed(() => {
            if (!NUpload.showRemoveButtonRef.value)
                return false;
            const { file } = props;
            return ['finished'].includes(file.status);
        });
        const showDownloadButtonRef = vue_1.computed(() => {
            if (!NUpload.showDownloadButtonRef.value)
                return false;
            const { file } = props;
            return ['finished'].includes(file.status);
        });
        const showRetryButtonRef = vue_1.computed(() => {
            if (!NUpload.showRetryButtonRef.value)
                return false;
            const { file } = props;
            return ['error'].includes(file.status);
        });
        function handleRetryClick() {
            NUpload.submit(props.file.id);
        }
        function handleRemoveOrCancelClick(e) {
            e.preventDefault();
            const { file } = props;
            if (['finished', 'pending', 'error'].includes(file.status)) {
                handleRemove(file);
            }
            else if (['uploading'].includes(file.status)) {
                handleAbort(file);
            }
            else {
                _utils_1.warn('upload', 'The button clicked type is unknown.');
            }
        }
        function handleDownloadClick(e) {
            e.preventDefault();
            handleDownload(props.file);
        }
        function handleRemove(file) {
            const { XhrMap, doChange, onRemoveRef: { value: onRemove }, mergedFileListRef: { value: mergedFileList } } = NUpload;
            void Promise.resolve(onRemove
                ? onRemove({
                    file: Object.assign({}, file),
                    fileList: mergedFileList
                })
                : true).then((result) => {
                if (result === false)
                    return;
                const fileAfterChange = Object.assign({}, file, {
                    status: 'removed'
                });
                XhrMap.delete(file.id);
                doChange(fileAfterChange, undefined, {
                    remove: true
                });
            });
        }
        function handleDownload(file) {
            const { onDownloadRef: { value: onDownload } } = NUpload;
            void Promise.resolve(onDownload ? onDownload(Object.assign({}, file)) : true).then((res) => {
                /** I haven't figure out its usage, so just leave it here */
            });
        }
        function handleAbort(file) {
            const { XhrMap } = NUpload;
            const XHR = XhrMap.get(file.id);
            XHR === null || XHR === void 0 ? void 0 : XHR.abort();
            handleRemove(Object.assign({}, file));
        }
        return {
            mergedTheme: NUpload.mergedThemeRef,
            progressStatus: progressStatusRef,
            buttonType: buttonTypeRef,
            showProgress: showProgressRef,
            disabled: NUpload.disabledRef,
            showCancelButton: showCancelButtonRef,
            showRemoveButton: showRemoveButtonRef,
            showDownloadButton: showDownloadButtonRef,
            showRetryButton: showRetryButtonRef,
            handleRemoveOrCancelClick,
            handleDownloadClick,
            handleRetryClick
        };
    },
    render() {
        const { clsPrefix, mergedTheme } = this;
        return (vue_1.h("a", { ref: "noopener noreferer", target: "_blank", href: this.file.url || undefined, class: [
                `${clsPrefix}-upload-file`,
                `${clsPrefix}-upload-file--${this.progressStatus}-status`,
                this.file.url && `${clsPrefix}-upload-file--with-url`
            ] },
            vue_1.h("div", { class: `${clsPrefix}-upload-file-info` },
                vue_1.h("div", { class: `${clsPrefix}-upload-file-info__name` },
                    vue_1.h(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, { default: () => vue_1.h(icons_1.AttachIcon, null) }),
                    this.file.name),
                vue_1.h("div", { class: `${clsPrefix}-upload-file-info__action` },
                    (this.showRemoveButton || this.showCancelButton) &&
                        !this.disabled && (vue_1.h(button_1.NButton, { key: "cancelOrTrash", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, text: true, type: this.buttonType, onClick: this.handleRemoveOrCancelClick }, {
                        icon: () => (vue_1.h(_internal_1.NIconSwitchTransition, null, {
                            default: () => this.showRemoveButton ? (vue_1.h(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, key: "trash" }, { default: () => vue_1.h(icons_1.TrashIcon, null) })) : (vue_1.h(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, key: "cancel" }, { default: () => vue_1.h(icons_1.CancelIcon, null) }))
                        }))
                    })),
                    this.showRetryButton && !this.disabled && (vue_1.h(button_1.NButton, { key: "retry", text: true, type: this.buttonType, onClick: this.handleRetryClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, {
                        icon: () => (vue_1.h(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, { default: () => vue_1.h(icons_1.RetryIcon, null) }))
                    })),
                    this.showDownloadButton ? (vue_1.h(button_1.NButton, { key: "download", text: true, type: this.buttonType, onClick: this.handleDownloadClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button }, {
                        icon: () => (vue_1.h(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, { default: () => vue_1.h(icons_1.DownloadIcon, null) }))
                    })) : null)),
            vue_1.h(UploadProgress_1.default, { show: this.showProgress, percentage: this.file.percentage || 0, status: this.progressStatus })));
    }
});
