import * as React from "react";
import { useState } from "react";
import * as cx from "classnames";
import Linkify from "react-linkify";
import * as FontAwesome from "react-fontawesome";
import * as _ from "lodash";
import { FlexBox, Button, Tooltip } from "../";
import { formatDateForTimestamp } from "./NormalAnnouncementBubble";
import { componentDecorator, matchDecorator } from "../MessagingBubble/linkifyUtils";
import "./QuotedAnnouncementBubble.less";
function cssClass(element) {
    return "QuotedAnnouncementBubble--" + element;
}
export var QuotedAnnouncementBubble = function (_a) {
    var announcementGroupName = _a.announcementGroupName, attachments = _a.attachments, children = _a.children, className = _a.className, colorTheme = _a.colorTheme, inlineErrorMsg = _a.inlineErrorMsg, isMessageTruncated = _a.isMessageTruncated, postedInText = _a.postedInText, senderIcon = _a.senderIcon, senderName = _a.senderName, sentAtTimestamp = _a.sentAtTimestamp, showLessButtonText = _a.showLessButtonText, showMoreButtonText = _a.showMoreButtonText, theme = _a.theme, truncationNoticeText = _a.truncationNoticeText, truncationTooltipText = _a.truncationTooltipText, onToggleShow = _a.onToggleShow;
    var _b = useState(false), isExpanded = _b[0], setIsExpanded = _b[1];
    var messageDetails = postedInText || "Posted in " + announcementGroupName;
    messageDetails += " | " + formatDateForTimestamp(sentAtTimestamp);
    /* If the content is not expanded, limit the message length so that screen readers
      don't attempt to read the entire hidden message. This only works for plain-string children */
    var content = children;
    var showEllipsis = false;
    if (!isExpanded && typeof content === "string") {
        var previewLength = 100;
        var firstLineBreak = content.indexOf("\n");
        /* If we have a line break and the first line of text is shorter than the preview length,
        pad the first line up until the longest line in the expanded view so the width of the bubble
        is the same when expanded and when not. */
        if (firstLineBreak > -1 && firstLineBreak < previewLength - 1) {
            var allLines = content.split("\n");
            allLines = allLines.concat([messageDetails]); // Also consider the message details
            var firstLine = allLines[0];
            var longestLine = allLines.reduce(function (longest, current) {
                return longest.length > current.length ? longest : current;
            });
            content = _.padEnd(firstLine, longestLine.length, "\xa0");
        }
        else {
            // If there is no line break, add padding if the message is shorter than the message details
            // as long as the message details are shorter than the preview length
            if (content.length < messageDetails.length && messageDetails.length < previewLength) {
                content = _.padEnd(content, messageDetails.length, "\xa0");
            }
            else {
                // If the message is not truncated, it's safe to add the ellipsis via css. We do
                // not add it in all other cases since we don't want to to show ellipsis after whitespace
                content = content.substring(0, previewLength);
                showEllipsis = true;
            }
        }
    }
    var buttonText = isExpanded
        ? showLessButtonText || "Show less"
        : showMoreButtonText || "Show more";
    return (React.createElement(FlexBox, { alignItems: "start", column: true, className: cx(cssClass("container"), cssClass("container--" + colorTheme), theme === "familyPortal" && cssClass("FamilyPortal"), className), grow: true },
        React.createElement(FlexBox, { alignItems: "center" },
            React.createElement("div", { className: cssClass("senderIcon") }, senderIcon),
            React.createElement("div", { className: cssClass("senderName") }, senderName)),
        content && (React.createElement("div", { className: cx(cssClass("messageBody"), !isExpanded && cssClass("messageBody--truncated"), showEllipsis && cssClass("messageBody--ellipsis")) },
            React.createElement(Linkify, { componentDecorator: componentDecorator, matchDecorator: matchDecorator }, content))),
        isMessageTruncated && isExpanded && (React.createElement(FlexBox, { className: cssClass("messageTruncatedNotice"), alignItems: "center" },
            React.createElement("span", null,
                truncationNoticeText || "Complete announcement not shown",
                React.createElement(Tooltip, { content: truncationTooltipText ||
                        "This announcement exceeds the preview character limit. See original announcement for complete content.", placement: Tooltip.Placement.TOP },
                    React.createElement(FontAwesome, { name: "question-circle", className: cssClass("messageTruncatedNotice--icon") }))))),
        (isExpanded || !content) && (React.createElement(React.Fragment, null,
            isExpanded && inlineErrorMsg && (React.createElement(FlexBox, { className: cssClass("inlineError--" + colorTheme), 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(FlexBox, { className: cx(cssClass("attachmentContainer"), cssClass("attachmentContainer--" + colorTheme), !content && cssClass("attachmentContainer--marginTop")) }, attachments)),
            isExpanded && (React.createElement("span", { className: cssClass("messageDetails--" + colorTheme) }, messageDetails)))),
        React.createElement(Button, { className: cssClass("button--outer"), ariaLabel: buttonText, onClick: function () {
                if (onToggleShow) {
                    onToggleShow();
                }
                setIsExpanded(!isExpanded);
            }, type: "linkPlain" },
            React.createElement("span", { className: cx(cssClass("button--inner"), cssClass("button--" + colorTheme)), tabIndex: -1 }, buttonText))));
};
