"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AttachmentPreview = exports.cssClass = void 0;
var classnames = require("classnames");
var React = require("react");
var react_1 = require("react");
var FontAwesome = require("react-fontawesome");
var Button_1 = require("../Button/Button");
var flex_1 = require("../flex");
var MessagingAttachment_1 = require("../MessagingAttachment/MessagingAttachment");
require("./AttachmentPreview.less");
exports.cssClass = {
    CONTAINER: "AttachmentPreview",
    BACKGROUND: "AttachmentPreview--Background",
    HEADER_BAR: "AttachmentPreview--HeaderBar",
    FILE_ICON: "AttachmentPreview--FileIcon",
    ATTACHMENT_NAME: "AttachmentPreview--AttachmentName",
    DOWNLOAD_CONTAINER: "AttachmentPreview--DownloadContainer",
    DOWNLOAD_BUTTON: "AttachmentPreview--DownloadButton",
    CLOSE_CONTAINER: "AttachmentPreview--CloseContainer",
    CLOSE_BUTTON: "AttachmentPreview--CloseButton",
    PREVIEW_WINDOW: "AttachmentPreview--PreviewWindow",
    IMAGE_CONTAINER: "AttachmentPreview--ImageContainer",
    ERROR_CONTAINER: "AttachmentPreview--ErrorContainer",
    ERROR_ICON: "AttachmentPreview--ErrorIcon",
    FOOTER_BAR: "AttachmentPreview--FooterBar",
};
var ESC = 27;
/**
 * A full page preview for messaging attachments.
 * Currently only used for images, but eventually will be used for PDFs and other attachment types.
 */
exports.AttachmentPreview = function (_a) {
    var attachmentName = _a.attachmentName, attachmentURL = _a.attachmentURL, className = _a.className, _b = _a.closeButtonAriaLabel, closeButtonAriaLabel = _b === void 0 ? "close attachment preview" : _b, _c = _a.downloadButtonTextDesktop, downloadButtonTextDesktop = _c === void 0 ? "Download" : _c, _d = _a.downloadButtonTextMobile, downloadButtonTextMobile = _d === void 0 ? "Save" : _d, fileType = _a.fileType, onClickDownload = _a.onClickDownload, onClose = _a.onClose;
    var _e = react_1.useState(false), imageLoadError = _e[0], setImageLoadError = _e[1];
    function handleKeyUp(e) {
        if (e.keyCode === ESC) {
            onClose();
        }
    }
    // This is the react hooks version of componentDidMount() and componentWillUnmount()
    react_1.useEffect(function () {
        window.addEventListener("keyup", handleKeyUp);
        return function () {
            window.removeEventListener("keyup", handleKeyUp);
        };
    }, []);
    var onBackgroundClick = function (event) {
        var backgroundWasClicked = event.target === event.currentTarget;
        if (backgroundWasClicked) {
            onClose();
        }
    };
    return (React.createElement("div", { className: classnames(exports.cssClass.CONTAINER, className) },
        React.createElement("div", { className: exports.cssClass.BACKGROUND, "aria-hidden": "true" }),
        React.createElement(flex_1.FlexBox, { className: exports.cssClass.HEADER_BAR },
            React.createElement(MessagingAttachment_1.FileAttachmentIcon, { className: exports.cssClass.FILE_ICON, fileType: fileType }),
            React.createElement(flex_1.FlexItem, { grow: true, className: exports.cssClass.ATTACHMENT_NAME }, attachmentName),
            React.createElement(Button_1.Button, { type: "linkPlain", className: exports.cssClass.DOWNLOAD_CONTAINER, onClick: onClickDownload },
                React.createElement(FontAwesome, { className: exports.cssClass.DOWNLOAD_BUTTON, name: "download" }),
                " ",
                downloadButtonTextDesktop),
            React.createElement(Button_1.Button, { type: "linkPlain", className: exports.cssClass.CLOSE_CONTAINER, ariaLabel: closeButtonAriaLabel, onClick: onClose },
                React.createElement(FontAwesome, { name: "times", className: exports.cssClass.CLOSE_BUTTON }))),
        React.createElement(flex_1.FlexBox, { className: exports.cssClass.PREVIEW_WINDOW },
            React.createElement(flex_1.FlexBox, { className: exports.cssClass.IMAGE_CONTAINER, onClick: onBackgroundClick },
                !imageLoadError && (React.createElement("img", { src: attachmentURL, alt: "attachment preview", onError: function () { return setImageLoadError(true); } })),
                imageLoadError && (React.createElement(flex_1.FlexBox, { className: exports.cssClass.ERROR_CONTAINER },
                    React.createElement(FontAwesome, { name: "frown-o", className: exports.cssClass.ERROR_ICON }),
                    " Image load error")))),
        React.createElement("div", { className: exports.cssClass.FOOTER_BAR },
            React.createElement(Button_1.Button, { type: "linkPlain", className: exports.cssClass.DOWNLOAD_CONTAINER, onClick: onClickDownload },
                React.createElement(FontAwesome, { className: exports.cssClass.DOWNLOAD_BUTTON, name: "download" }),
                " ",
                React.createElement("span", null, downloadButtonTextMobile)))));
};
