"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MessagingThreadListItem = void 0;
var React = require("react");
var classNames = require("classnames");
var moment = require("moment");
var FontAwesome = require("react-fontawesome");
var index_1 = require("../index");
var DraftPencilIcon_1 = require("./DraftPencilIcon");
var Tooltip_1 = require("../Tooltip");
var Label_1 = require("../Label/Label");
require("./MessagingThreadListItem.less");
var cssClasses = {
    CONTAINER: "ThreadListItem",
    CONTAINER_OFF: "ThreadListItem--off",
    CONTAINER_SELECTED: "ThreadListItem--selected",
    ICON: "ThreadListItem--Icon",
    DETAILS_CONTAINER: "ThreadListItem--Details--Container",
    NAME: "ThreadListItem--Name",
    PREVIEW: "ThreadListItem--Preview",
    PREVIEW_ITALICS: "ThreadListItem--Preview--italics",
    TIMESTAMP: "ThreadListItem--Timestamp",
    TIMESTAMP_SELECTED: "ThreadListItem--Timestamp--selected",
    INDICATOR_CONTAINER: "ThreadListItem--Indicator--Container",
    NEW_LABEL_CONTAINER: "ThreadListItem--NewLabel--Container",
    DRAFT_INDICATOR: "ThreadListItem--DraftIndicator",
    UNREAD_ORB: "ThreadListItem--UnreadOrb",
    UNREAD_TEXT: "ThreadListItem--UnreadText",
};
var unreadOrbColorClasses = {
    accent_teal: "ThreadListItem--UnreadOrb--AccentTeal",
    primary_blue: "ThreadListItem--UnreadOrb--PrimaryBlue",
};
/**
 * @deprecated Do not use. Instead, use [@clever/msg-thread-list-item](https://github.com/Clever/clever-ui/tree/master/packages/msg-thread-list-item)
 */
exports.MessagingThreadListItem = React.forwardRef(function (props, ref) {
    var children = props.children, className = props.className, icon = props.icon, _a = props.isRead, isRead = _a === void 0 ? true : _a, italicizeSubtitle = props.italicizeSubtitle, timestamp = props.timestamp, title = props.title, hasDraft = props.hasDraft, selected = props.selected, _b = props.status, status = _b === void 0 ? "active" : _b, offStatusText = props.offStatusText, onClick = props.onClick, hasAlert = props.hasAlert, alertTooltip = props.alertTooltip, unreadOrbColor = props.unreadOrbColor, showNewLabel = props.showNewLabel;
    var subContent;
    var subContentClass;
    if (status === "active" || !isRead) {
        subContent = _filterChildren(children);
        subContentClass = classNames(cssClasses.PREVIEW, !isRead && cssClasses.UNREAD_TEXT, italicizeSubtitle && cssClasses.PREVIEW_ITALICS);
    }
    else {
        subContent = offStatusText || "Messages are turned off";
        subContentClass = classNames(cssClasses.PREVIEW, cssClasses.PREVIEW_ITALICS);
    }
    var indicatorIcon;
    var indicator;
    if (showNewLabel) {
        indicator = (React.createElement(index_1.FlexBox, { className: cssClasses.NEW_LABEL_CONTAINER, justify: index_1.Justify.END }, showNewLabel && React.createElement(Label_1.default, { color: "new-feature" }, "New")));
    }
    else {
        if (hasAlert) {
            indicatorIcon = alertTooltip ? (React.createElement(Tooltip_1.Tooltip, { content: alertTooltip, placement: Tooltip_1.Tooltip.Placement.BOTTOM, textAlign: Tooltip_1.Tooltip.Align.CENTER },
                React.createElement(FontAwesome, { name: "exclamation-triangle" }))) : (React.createElement(FontAwesome, { name: "exclamation-triangle" }));
        }
        else if (!isRead) {
            indicatorIcon = (React.createElement("div", { role: "status", "aria-label": "Unread messages in thread " + title, className: classNames(cssClasses.UNREAD_ORB, unreadOrbColor && unreadOrbColorClasses[unreadOrbColor]) }));
        }
        else if (status === "active" && hasDraft) {
            indicatorIcon = React.createElement(DraftPencilIcon_1.DraftPencilIcon, null);
        }
        indicator = (React.createElement(index_1.FlexBox, { className: cssClasses.INDICATOR_CONTAINER, justify: index_1.Justify.END }, indicatorIcon));
    }
    // "New" Label overrides timestamp
    var showTimestamp = timestamp && !showNewLabel;
    var isIndicatorAlignedWithSubContent = subContent && showTimestamp;
    return (React.createElement("div", { ref: ref },
        React.createElement(index_1.FlexBox, { className: classNames(cssClasses.CONTAINER, (selected && cssClasses.CONTAINER_SELECTED) ||
                (status === "off" && cssClasses.CONTAINER_OFF), className), onClick: onClick, alignItems: index_1.ItemAlign.CENTER },
            React.createElement("div", { className: cssClasses.ICON }, icon),
            React.createElement(index_1.FlexItem, { grow: true, className: cssClasses.DETAILS_CONTAINER },
                React.createElement(index_1.FlexBox, { alignItems: index_1.ItemAlign.CENTER },
                    React.createElement("div", { className: classNames(cssClasses.NAME, !isRead && cssClasses.UNREAD_TEXT) }, title),
                    (status === "active" || !isRead) && (React.createElement("div", { className: classNames(cssClasses.TIMESTAMP, selected && cssClasses.TIMESTAMP_SELECTED) }, showTimestamp && _formatDateForTimestamp(timestamp)))),
                subContent && (React.createElement(index_1.FlexBox, { alignItems: index_1.ItemAlign.CENTER },
                    React.createElement("div", { className: subContentClass }, subContent),
                    isIndicatorAlignedWithSubContent && indicator))),
            React.createElement(index_1.FlexItem, null, !isIndicatorAlignedWithSubContent && indicator))));
});
// Helper function: Format a Date for our pretty timestamps.
//  Returns "xx:xx <AM|PM>" time if today, otherwise returns "<month> <day>" date.
function _formatDateForTimestamp(date) {
    var _a = [moment(date), moment().hours(0)], messageTimestamp = _a[0], midnightToday = _a[1];
    if (messageTimestamp.isAfter(midnightToday)) {
        return messageTimestamp.format("h:mm A");
    }
    return messageTimestamp.format("MMM D");
}
// Helper function: Filters out falsey values if multiple children,
//  which avoids having 'blank' child elements that disrupt the styling.
function _filterChildren(children) {
    // If an array, we want to filter out the falsey elements.
    if (children && Array.isArray(children)) {
        var filteredChildren = children.filter(function (child) { return !!child; });
        // If now an empty array, nothing to render. Otherwise, render children!
        return filteredChildren.length === 0 ? undefined : filteredChildren;
    }
    // If not an array, then there's no filtering we need to do.
    return children;
}
