"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.formatDateForTimestamp = exports.NormalAnnouncementBubble = void 0;
var React = require("react");
var moment = require("moment");
var cx = require("classnames");
var FontAwesome = require("react-fontawesome");
var react_linkify_1 = require("react-linkify");
var __1 = require("../");
var linkifyUtils_1 = require("../MessagingBubble/linkifyUtils");
var CheckMark_1 = require("../Checkbox/CheckMark");
require("./NormalAnnouncementBubble.less");
function cssClass(element) {
    return "NormalAnnouncementBubble--" + element;
}
exports.NormalAnnouncementBubble = function (_a) {
    var attachments = _a.attachments, children = _a.children, className = _a.className, inlineErrorMsg = _a.inlineErrorMsg, onDelete = _a.onDelete, onReadReceiptsClick = _a.onReadReceiptsClick, onReadReceiptsHover = _a.onReadReceiptsHover, onReply = _a.onReply, onTranslatedLanguagesClick = _a.onTranslatedLanguagesClick, onTranslatedLanguagesHover = _a.onTranslatedLanguagesHover, readBy = _a.readBy, recipientType = _a.recipientType, repliesDisabledMsg = _a.repliesDisabledMsg, replyButtonText = _a.replyButtonText, senderIcon = _a.senderIcon, senderName = _a.senderName, sentAtTimestamp = _a.sentAtTimestamp, translatedLanguages = _a.translatedLanguages;
    var deleteMenu = formDeleteMenu(onDelete);
    var replyButton = formReplyButton(onReply, repliesDisabledMsg, replyButtonText);
    var readReceiptsTooltip = (readBy === null || readBy === void 0 ? void 0 : readBy.length) > 0
        ? formReadReceiptsTooltip(onReadReceiptsClick, onReadReceiptsHover, readBy, recipientType)
        : null;
    return (React.createElement(__1.FlexBox, { grow: true, column: true, className: cx(cssClass("container"), className) },
        React.createElement(__1.FlexBox, null,
            React.createElement("div", { className: cssClass("senderIcon") }, senderIcon),
            React.createElement(__1.FlexBox, { column: true, alignItems: "start", justify: "center" },
                React.createElement("h4", { className: cssClass("senderName") }, senderName),
                React.createElement("div", { className: cssClass("timestamp") }, formatDateForTimestamp(sentAtTimestamp))),
            deleteMenu),
        children && (React.createElement(react_linkify_1.default, { componentDecorator: linkifyUtils_1.componentDecorator, matchDecorator: linkifyUtils_1.matchDecorator },
            React.createElement("div", { className: cssClass("messageBody") }, children))),
        inlineErrorMsg && (React.createElement(__1.FlexBox, { className: cssClass("inlineError"), grow: true, alignItems: "center" },
            React.createElement("div", { className: cssClass("inlineError--contents") },
                React.createElement(FontAwesome, { className: cssClass("inlineError--icon"), name: "exclamation-circle " }),
                inlineErrorMsg))),
        (attachments === null || attachments === void 0 ? void 0 : attachments.length) > 0 && (React.createElement(__1.FlexBox, { className: cssClass("attachmentContainer") }, attachments)),
        React.createElement(__1.FlexBox, { justify: "between" },
            (translatedLanguages === null || translatedLanguages === void 0 ? void 0 : translatedLanguages.length) > 0 && (React.createElement(NumTranslatedLanguagesTooltip, { translatedLanguages: translatedLanguages, onTranslatedLanguagesClick: onTranslatedLanguagesClick, onTranslatedLanguagesHover: onTranslatedLanguagesHover })),
            readReceiptsTooltip),
        replyButton));
};
function formDeleteMenu(onDelete) {
    // If no onDelete callback is passed, don't show any menu for the delete button
    if (!onDelete) {
        return undefined;
    }
    return (React.createElement(__1.Menu, { className: cssClass("menu"), placement: "right", trigger: React.createElement(__1.Button, { size: "small", className: cssClass("menuIconContainer"), type: "link" },
            React.createElement(__1.FlexBox, { alignItems: "center", justify: "center" },
                React.createElement("img", { alt: "announcement menu", src: require("./menu-triple-dot.svg") }))) },
        React.createElement(__1.Menu.Item, { className: cssClass("deleteMenuItem"), onClick: onDelete, key: "delete" }, "Delete")));
}
function formReplyButton(onReply, repliesDisabledMsg, replyButtonText) {
    // If a repliesDisabledMsg prop is provided, show the disabled reply button
    if (repliesDisabledMsg) {
        return (React.createElement(DisabledReplyButton, { disabledMsg: repliesDisabledMsg, replyButtonText: replyButtonText }));
    }
    // If an onReply callback prop is provided, show the reply button
    if (onReply) {
        return React.createElement(ReplyButton, { onReply: onReply, replyButtonText: replyButtonText });
    }
    // Default case is to show no reply button
    return undefined;
}
function formReadReceiptsTooltip(onReadReceiptsClick, onReadReceiptsHover, readBy, recipientType) {
    var readReceiptCount = readBy.length;
    var readReceiptString = formTooltipText(readBy);
    var displayRecipientType = recipientType === "guardian" ? "parent" : recipientType;
    var recipientString = readBy.length === 1 ? displayRecipientType : displayRecipientType + "s";
    return (React.createElement(__1.FlexBox, { alignItems: "center", justify: "end", className: cssClass("readReceipts--container") },
        React.createElement(__1.Tooltip, { className: cssClass("readReceipts--tooltip"), content: readReceiptString, placement: "top", textAlign: "left" },
            React.createElement(__1.Button, { className: cssClass("readReceipts--button"), onClick: onReadReceiptsClick, type: "plain" },
                React.createElement(__1.FlexBox, { onMouseEnter: onReadReceiptsHover },
                    React.createElement(CheckMark_1.default, { className: cssClass("readReceipts--icon") }),
                    React.createElement("span", { className: cssClass("readReceipts--text--desktop") },
                        "Read by ",
                        readReceiptCount,
                        " ",
                        recipientString),
                    React.createElement("span", { className: cssClass("readReceipts--text--mobile") }, readReceiptCount))))));
}
function formTooltipText(values) {
    var valuesCount = values.length;
    if (valuesCount === 1) {
        return values[0];
    }
    values.sort(function (a, b) {
        return a.toLowerCase().localeCompare(b.toLowerCase());
    });
    if (valuesCount <= 3) {
        return values.join("\n");
    }
    var tooltipLong = [values[0], values[1], values[2], "and " + (valuesCount - 3) + " more..."];
    return tooltipLong.join("\n");
}
function ReplyButton(_a) {
    var onReply = _a.onReply, replyButtonText = _a.replyButtonText;
    return (React.createElement(__1.Button, { ariaLabel: "Reply", dataTestID: "replyToAnnouncementButton", className: cssClass("replyButton"), onClick: onReply, type: "secondary" },
        React.createElement(__1.FlexBox, { alignItems: "center", justify: "center" },
            React.createElement("img", { alt: "", className: cssClass("replyButton--icon"), src: require("./messages-dark-gray-icon.svg") }),
            React.createElement("span", { className: cssClass("replyButton--text") }, replyButtonText || "Reply"))));
}
function DisabledReplyButton(_a) {
    var disabledMsg = _a.disabledMsg, replyButtonText = _a.replyButtonText;
    return (React.createElement(__1.Button, { ariaLabel: disabledMsg, className: cx(cssClass("replyButton"), cssClass("replyButton--disabled")), disabled: true, type: "secondary" },
        React.createElement(__1.Tooltip, { content: disabledMsg, placement: "top", textAlign: "center", tooltipClassName: cssClass("tooltip") },
            React.createElement(__1.FlexBox, { alignItems: "center", justify: "center" },
                React.createElement("img", { alt: "", className: cssClass("replyButton--icon"), src: require("./messages-dark-gray-icon.svg") }),
                React.createElement("span", { className: cx(cssClass("replyButton--text"), cssClass("replyButton--text--disabled")) }, replyButtonText || "Reply")))));
}
function NumTranslatedLanguagesTooltip(_a) {
    var translatedLanguages = _a.translatedLanguages, onTranslatedLanguagesClick = _a.onTranslatedLanguagesClick, onTranslatedLanguagesHover = _a.onTranslatedLanguagesHover;
    var numTranslatedLanguages = translatedLanguages.length;
    var translatedLanguagesString = formTooltipText(translatedLanguages);
    return (React.createElement(__1.FlexBox, { className: cssClass("translatedLanguages--container"), alignItems: "center", justify: "start" },
        React.createElement(__1.Tooltip, { className: cssClass("translatedLanguages--tooltip"), content: translatedLanguagesString, placement: "top", textAlign: "left" },
            React.createElement(__1.Button, { className: cssClass("translatedLanguages--button"), onClick: onTranslatedLanguagesClick, type: "plain" },
                React.createElement(__1.FlexBox, { onMouseEnter: onTranslatedLanguagesHover },
                    React.createElement(TranslateIcon, null),
                    React.createElement("span", { className: cssClass("translatedLanguages--text--desktop") }, numTranslatedLanguages === 1
                        ? "Translated into 1 language"
                        : "Translated into " + numTranslatedLanguages + " languages"),
                    React.createElement("span", { className: cssClass("translatedLanguages--text--mobile") }, numTranslatedLanguages))))));
}
function TranslateIcon() {
    return (React.createElement("svg", { className: cssClass("translatedLanguages--icon"), viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
        React.createElement("path", { d: "M8.55364 10.3173L6.93727 8.72L6.95636 8.70091C8.06364 7.46636 8.85273 6.04727 9.31727 4.54545H11.1818V3.27273H6.72727V2H5.45455V3.27273H1V4.53909H8.10818C7.68182 5.76727 7.00727 6.93182 6.09091 7.95C5.49909 7.29455 5.00909 6.57545 4.62091 5.81818H3.34818C3.81273 6.85545 4.44909 7.83545 5.24455 8.72L2.00545 11.9145L2.90909 12.8182L6.09091 9.63636L8.07 11.6155L8.55364 10.3173ZM12.1364 7.09091H10.8636L8 14.7273H9.27273L9.98545 12.8182H13.0082L13.7273 14.7273H15L12.1364 7.09091ZM10.4691 11.5455L11.5 8.79L12.5309 11.5455H10.4691Z" })));
}
// Helper function: Format a Date for our pretty timestamps.
//  Always returns "xx:xx <AM/PM>" format.
function formatDateForTimestamp(date) {
    return moment(date).format("h:mm A");
}
exports.formatDateForTimestamp = formatDateForTimestamp;
