"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileAttachmentIcon = exports.PreviewableFileTypes = exports.MessagingAttachment = void 0;
var React = require("react");
var FontAwesome = require("react-fontawesome");
var cx = require("classnames");
var AttachmentPreview_1 = require("../AttachmentPreview");
var flex_1 = require("../flex");
var KeyCode_1 = require("../utils/KeyCode");
require("./MessagingAttachment.less");
function cssClass(element) {
    return "MessagingAttachment--" + element;
}
// TODO: replace with a discriminated union to keep the props neat
exports.MessagingAttachment = function (_a) {
    var attachmentPreviewProps = _a.attachmentPreviewProps, className = _a.className, errorMsg = _a.errorMsg, fileType = _a.fileType, icon = _a.icon, onPreviewAttachment = _a.onPreviewAttachment, onClickDownload = _a.onClickDownload, onRemoveAttachment = _a.onRemoveAttachment, title = _a.title, subtitle = _a.subtitle, isUpload = _a.isUpload, uploadComplete = _a.uploadComplete, theme = _a.theme, dataTestID = _a.dataTestID;
    var _b = React.useState(false), attachmentPreviewIsShowing = _b[0], setAttachmentPreviewIsShowing = _b[1];
    var isPreviewableAttachment = exports.PreviewableFileTypes.has(fileType);
    return (React.createElement(flex_1.FlexBox, { className: cx(cssClass("ParentContainer"), isUpload && cssClass("ParentContainer--IsUpload"), className, theme === "familyPortal" && cssClass("FamilyPortal")) },
        onRemoveAttachment && (React.createElement("button", { className: cssClass("CloseButton"), onClick: function (e) { return handleRemoveClick(e, onRemoveAttachment); }, "aria-label": "close attachment with title: \"" + title + "\"" },
            React.createElement(FontAwesome, { name: "times", className: cssClass("CloseIcon") }))),
        React.createElement(flex_1.FlexBox, { className: cx(cssClass("Container"), isUpload && cssClass("Short"), isUpload && !uploadComplete && cssClass("IsUploading"), !!errorMsg && cssClass("Error")), "aria-label": "Attachment", tabIndex: 0, onClick: function (e) {
                return handleClickAttachment(e, isUpload, uploadComplete, isPreviewableAttachment, setAttachmentPreviewIsShowing, onPreviewAttachment, onClickDownload);
            }, onKeyDown: function (e) {
                if (e.key === KeyCode_1.default.ENTER) {
                    handleClickAttachment(e, isUpload, uploadComplete, isPreviewableAttachment, setAttachmentPreviewIsShowing, onPreviewAttachment, onClickDownload);
                }
            } },
            React.createElement(flex_1.FlexBox, { className: cssClass("IconContainer") }, icon || (React.createElement(FileAttachmentIcon, { fileType: fileType, isUpload: isUpload, uploadError: !!errorMsg, uploadComplete: uploadComplete }))),
            React.createElement(flex_1.FlexBox, { className: cssClass("TextContainer"), column: true },
                React.createElement("span", { role: "status", className: cssClass("Title") }, errorMsg || title),
                subtitle && (React.createElement("span", { "data-testid": dataTestID, role: "button", className: cssClass("Subtitle") }, subtitle)))),
        attachmentPreviewIsShowing && isPreviewableAttachment && (React.createElement(AttachmentPreview_1.AttachmentPreview, { attachmentName: title, attachmentURL: attachmentPreviewProps.attachmentURL, className: attachmentPreviewProps.className, closeButtonAriaLabel: attachmentPreviewProps.closeButtonAriaLabel, downloadButtonTextDesktop: attachmentPreviewProps.downloadButtonTextDesktop, downloadButtonTextMobile: attachmentPreviewProps.downloadButtonTextMobile, fileType: fileType, onClickDownload: onClickDownload, onClose: function () { return setAttachmentPreviewIsShowing(false); } }))));
};
function handleClickAttachment(e, isUpload, uploadComplete, isPreviewableAttachment, setAttachmentPreviewIsShowing, onPreviewAttachment, onClickDownload) {
    if (isUpload && !uploadComplete) {
        e.stopPropagation();
    }
    else if (isPreviewableAttachment) {
        setAttachmentPreviewIsShowing(true);
        if (onPreviewAttachment) {
            onPreviewAttachment();
        }
    }
    else {
        onClickDownload();
    }
}
function handleRemoveClick(e, onRemoveAttachment) {
    e.stopPropagation();
    onRemoveAttachment();
}
// the set of fileTypes we are previewing in AttachmentPreviews
exports.PreviewableFileTypes = new Set(["jpg", "jpeg", "gif", "png", "svg"]);
function fileTypeToIconType(fileType) {
    var mapFileTypeToIconType = {
        pdf: "pdf",
        doc: "doc",
        docx: "doc",
        xls: "xls",
        xlsx: "xls",
        csv: "catchall",
        ppt: "ppt",
        pptx: "ppt",
        jpg: "image",
        jpeg: "image",
        gif: "image",
        png: "image",
        svg: "image",
        mp4: "audio",
        mov: "video",
        wmv: "video",
        mp3: "audio",
        wav: "audio",
        m4a: "audio",
        flv: "video",
        txt: "doc",
        null: "catchall",
    };
    return mapFileTypeToIconType[fileType] || "catchall";
}
var draftAudio = require("./icons/draft-attachment-audio.svg");
var draftCatchall = require("./icons/draft-attachment-catchall.svg");
var draftDoc = require("./icons/draft-attachment-doc.svg");
var draftImage = require("./icons/draft-attachment-image.svg");
var draftPdf = require("./icons/draft-attachment-pdf.svg");
var draftPpt = require("./icons/draft-attachment-ppt.svg");
var draftVideo = require("./icons/draft-attachment-video.svg");
var draftXls = require("./icons/draft-attachment-xls.svg");
var sentAudio = require("./icons/sent-attachment-audio.svg");
var sentCatchall = require("./icons/sent-attachment-catchall.svg");
var sentDoc = require("./icons/sent-attachment-doc.svg");
var sentImage = require("./icons/sent-attachment-image.svg");
var sentPdf = require("./icons/sent-attachment-pdf.svg");
var sentPpt = require("./icons/sent-attachment-ppt.svg");
var sentVideo = require("./icons/sent-attachment-video.svg");
var sentXls = require("./icons/sent-attachment-xls.svg");
// TODO: Can this be replaced with a programmatic solution
// const fileIcon = `./icons/${isUpload ? "draft" : "sent"}-attachment-${fileType}.svg`; ?
// Will "require" allow this?
var fileIcons = {
    audio: { sent: sentAudio, draft: draftAudio },
    catchall: { sent: sentCatchall, draft: draftCatchall },
    doc: { sent: sentDoc, draft: draftDoc },
    image: { sent: sentImage, draft: draftImage },
    pdf: { sent: sentPdf, draft: draftPdf },
    ppt: { sent: sentPpt, draft: draftPpt },
    video: { sent: sentVideo, draft: draftVideo },
    xls: { sent: sentXls, draft: draftXls },
};
// TODO: handle undefined. Note: Components uses jsx, LP uses tsx
function FileAttachmentIcon(_a) {
    var fileType = _a.fileType, isUpload = _a.isUpload, uploadComplete = _a.uploadComplete, uploadError = _a.uploadError, className = _a.className;
    var iconType = fileTypeToIconType(fileType);
    if (uploadError) {
        return (React.createElement(FontAwesome, { name: "exclamation-circle", className: cx(cssClass("ErrorCircle"), "fa-lg") }));
    }
    else if (isUpload && !uploadComplete) {
        return React.createElement(FontAwesome, { name: "spinner", className: cx(cssClass("ErrorCircle"), "fa-lg"), spin: true });
    }
    return (React.createElement("img", { src: isUpload ? fileIcons[iconType].draft : fileIcons[iconType].sent, className: cx(cssClass("AttachmentTypeIcon"), className), alt: "MessagingAttachment " + iconType + " icon" }));
}
exports.FileAttachmentIcon = FileAttachmentIcon;
