import * as React from "react";
import * as moment from "moment";
import Linkify from "react-linkify";
import * as cx from "classnames";
import { Button, FlexBox } from "..";
import { matchDecorator, componentDecorator } from "./linkifyUtils";
import "./NormalMessagingBubble.less";
var cssClasses = {
    MESSAGE_ATTACHMENT_BASE: "NormalMessagingBubble--Message--Attachment",
    MESSAGE_BASE: "NormalMessagingBubble--Message",
    MESSAGE_CONTAINER_BASE: "NormalMessagingBubble--Message--Container",
    MESSAGE_REPLY_BASE: "NormalMessagingBubble--Message--Reply",
    MESSAGE_REPLY_PARENT: "NormalMessagingBubble--Message--Reply--Parent",
    MESSAGE_METADATA_BASE: "NormalMessagingBubble--Message--Metadata",
    MESSAGE_ACTION_BUTTON_BASE: "NormalMessagingBubble--Message--ActionButton",
    MESSAGE_DELETE: "NormalMessagingBubble--Message--Delete",
    MESSAGE_TIMESTAMP_NONINTERACTIVE: "NormalMessagingBubble--Message--Timestamp--NonInteractive",
    MESSAGE_TIMESTAMP: "NormalMessagingBubble--Message--Timestamp",
    MESSAGE_TIME_BUBBLE_CONTAINER_BASE: "NormalMessagingBubble--Message--TimestampBubbleContainer",
    OWN_SUFFIX: "--Own",
    OTHER_SUFFIX: "--Other",
    FAMILY_PORTAL: "NormalMessagingBubble--FamilyPortal",
    HIDE_BUBBLE: "NormalMessagingBubble--HideBubble",
};
// Collect all hardcoded strings in one place for easy replacement when
// we eventually support i18n.
// TODO localize these strings for various languages, once we support multi-regions.
var i18nString = {
    DELETE: "Delete",
    YOUR_MESSAGE: "Your message",
    OTHERS_MESSAGE: "Other's message",
    QUOTED_MESSAGE: "Quoted message",
};
export var NormalMessagingBubble = function (_a) {
    var className = _a.className, children = _a.children, timestamp = _a.timestamp, theme = _a.theme, messageBody = _a.messageBody, messageOwnership = _a.messageOwnership, onClickDeleteButton = _a.onClickDeleteButton, replyTo = _a.replyTo, attachments = _a.attachments;
    var hideBubble = !children && !replyTo; // if message is only attachments, no body and not a reply
    var isOwnMessage = messageOwnership === "ownMessage";
    var classSuffix = isOwnMessage ? cssClasses.OWN_SUFFIX : cssClasses.OTHER_SUFFIX;
    var whoseMessage = isOwnMessage ? i18nString.YOUR_MESSAGE : i18nString.OTHERS_MESSAGE;
    var containerClassNames = cx(className, "" + cssClasses.MESSAGE_CONTAINER_BASE + classSuffix, theme === "familyPortal" && cssClasses.FAMILY_PORTAL, hideBubble && cssClasses.HIDE_BUBBLE);
    var bubbleClassNames = cx(cssClasses.MESSAGE_BASE, "" + cssClasses.MESSAGE_BASE + classSuffix, replyTo && cssClasses.MESSAGE_REPLY_PARENT);
    var replyClassNames = cx(cssClasses.MESSAGE_BASE, "" + cssClasses.MESSAGE_REPLY_BASE + classSuffix, children && cssClasses.MESSAGE_REPLY_BASE + "--MarginBottom");
    var metadataClassNames = cx(cssClasses.MESSAGE_BASE, "" + cssClasses.MESSAGE_METADATA_BASE + classSuffix);
    var actionButtonClassNames = cx(cssClasses.MESSAGE_BASE, "" + cssClasses.MESSAGE_ACTION_BUTTON_BASE + classSuffix);
    var timeAndBubbleContainerClasses = cx("" + cssClasses.MESSAGE_TIME_BUBBLE_CONTAINER_BASE + classSuffix);
    var attachmentClassNames = cx(cssClasses.MESSAGE_BASE, "" + cssClasses.MESSAGE_ATTACHMENT_BASE + classSuffix);
    return (React.createElement(FlexBox, { column: true, className: containerClassNames },
        React.createElement(FlexBox, { className: timeAndBubbleContainerClasses },
            !hideBubble &&
                _renderMetadata({
                    timestamp: timestamp,
                    onClickDeleteButton: onClickDeleteButton,
                    messageBody: messageBody,
                    metadataClassNames: metadataClassNames,
                    actionButtonClassNames: actionButtonClassNames,
                }),
            React.createElement("div", { className: hideBubble ? null : bubbleClassNames, "aria-label": whoseMessage },
                replyTo && (React.createElement("div", { className: replyClassNames, "aria-label": i18nString.QUOTED_MESSAGE }, replyTo)),
                React.createElement(Linkify, { componentDecorator: componentDecorator, matchDecorator: matchDecorator }, children))),
        React.createElement(FlexBox, { className: timeAndBubbleContainerClasses },
            hideBubble &&
                _renderMetadata({
                    timestamp: timestamp,
                    onClickDeleteButton: onClickDeleteButton,
                    messageBody: messageBody,
                    metadataClassNames: metadataClassNames,
                    actionButtonClassNames: actionButtonClassNames,
                }),
            (attachments === null || attachments === void 0 ? void 0 : attachments.length) > 0 && (React.createElement(FlexBox, { className: attachmentClassNames, "aria-label": whoseMessage }, attachments)))));
};
// Helper function: Format a Date for our pretty timestamps.
//  Always returns "xx:xx <AM/PM>" format.
// TODO localize time format to be region-specific
function _formatDateForTimestamp(date) {
    return moment(date).format("h:mm A");
}
// Helper function: renders metadata, consisting of either the action button
//  or a non-interactive timestamp
function _renderMetadata(_a) {
    var timestamp = _a.timestamp, onClickDeleteButton = _a.onClickDeleteButton, messageBody = _a.messageBody, metadataClassNames = _a.metadataClassNames, actionButtonClassNames = _a.actionButtonClassNames;
    if (!onClickDeleteButton) {
        return _renderNonInteractiveTimestamp({
            timestamp: timestamp,
            metadataClassNames: metadataClassNames,
        });
    }
    return _renderActionButton({
        timestamp: timestamp,
        onClickDeleteButton: onClickDeleteButton,
        messageBody: messageBody,
        metadataClassNames: metadataClassNames,
        actionButtonClassNames: actionButtonClassNames,
    });
}
// Helper function: renders a non-interactive timestamp
function _renderNonInteractiveTimestamp(_a) {
    var timestamp = _a.timestamp, metadataClassNames = _a.metadataClassNames;
    return (React.createElement("div", { className: metadataClassNames },
        React.createElement("span", { className: cssClasses.MESSAGE_TIMESTAMP_NONINTERACTIVE }, _formatDateForTimestamp(timestamp))));
}
// Helper function: renders Delete button or timestamp,
// depending on focus/hover/active state
function _renderActionButton(_a) {
    var timestamp = _a.timestamp, onClickDeleteButton = _a.onClickDeleteButton, messageBody = _a.messageBody, metadataClassNames = _a.metadataClassNames, actionButtonClassNames = _a.actionButtonClassNames;
    var formattedTimestamp = _formatDateForTimestamp(timestamp);
    return (React.createElement("div", { className: metadataClassNames },
        React.createElement(Button, { ariaLabel: i18nString.DELETE + " " + formattedTimestamp + " " + (messageBody || ""), className: actionButtonClassNames, type: "linkPlain", onClick: onClickDeleteButton },
            React.createElement(React.Fragment, null,
                React.createElement("span", { className: cssClasses.MESSAGE_DELETE }, "Delete"),
                React.createElement("span", { className: cssClasses.MESSAGE_TIMESTAMP }, formattedTimestamp)))));
}
