"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MessagingInput = void 0;
var React = require("react");
var react_1 = require("react");
var FontAwesome = require("react-fontawesome");
var cx = require("classnames");
var index_1 = require("../index");
var KeyCode_1 = require("../utils/KeyCode");
require("./MessagingInput.less");
function cssClass(element) {
    return "MessagingInput--" + element;
}
var TEXT_FIELD_NAME = "newMessage";
var MessagingInputRenderFunction = function (props, ref) {
    var _a;
    var attachments = props.attachments, checkbox = props.checkbox, className = props.className, disableSendButton = props.disableSendButton, label = props.label, newlineOnEnter = props.newlineOnEnter, onBlur = props.onBlur, onChange = props.onChange, onFocus = props.onFocus, onReplyCancel = props.onReplyCancel, onSubmit = props.onSubmit, _b = props.placeholder, placeholder = _b === void 0 ? "Send a message" : _b, replyTo = props.replyTo, _c = props.sendButtonText, sendButtonText = _c === void 0 ? "Send" : _c, showReturnKeyInstructions = props.showReturnKeyInstructions, showUploadAttachmentButton = props.showUploadAttachmentButton, store = props.store, value = props.value;
    var textAreaRef = react_1.useRef(null);
    react_1.useImperativeHandle(ref, function () { return ({
        focus: function () {
            if (textAreaRef.current) {
                textAreaRef.current.focus();
            }
        },
    }); });
    var attachmentsArePresent = (attachments === null || attachments === void 0 ? void 0 : attachments.length) > 0;
    var _d = react_1.useState(false), isInputActive = _d[0], setIsInputActive = _d[1];
    // Update this if relevant styling changes and this heuristic no longer holds
    var hasMultiLineText = ((_a = textAreaRef.current) === null || _a === void 0 ? void 0 : _a.textAreaHeight()) > 40;
    return (React.createElement(index_1.FlexBox, { className: cx(cssClass("Container"), showUploadAttachmentButton && cssClass("ShowUploadAttachmentButton"), className), column: true, alignItems: index_1.ItemAlign.START },
        React.createElement(index_1.FlexBox, { className: cssClass("InnerContainer") },
            React.createElement(index_1.FlexBox, { column: true, className: cssClass("InnerContainer--Content") },
                (label || checkbox) && (React.createElement(index_1.FlexBox, { alignItems: "center", className: cssClass("LabelAndCheckbox--Container"), grow: true },
                    label && (React.createElement("label", { className: cssClass("LabelAndCheckbox--Label"), htmlFor: TEXT_FIELD_NAME }, label)),
                    (checkbox === null || checkbox === void 0 ? void 0 : checkbox.isVisible) && (React.createElement(index_1.Checkbox, { className: cssClass("LabelAndCheckbox--Checkbox"), checked: checkbox.isChecked, onChange: function (_a) {
                            var checked = _a.checked;
                            return checkbox.onChange(checked);
                        } }, checkbox.label)))),
                replyTo && (React.createElement("div", { className: cx(cssClass("Reply--Container"), isInputActive && cssClass("Reply--Container--WithActiveInput")) },
                    React.createElement("div", { className: cssClass("Reply--Content") },
                        replyTo,
                        onReplyCancel && (React.createElement("button", { role: "button", className: cssClass("Reply--CloseButton"), onClick: onReplyCancel, "aria-label": "Cancel reply" },
                            React.createElement(FontAwesome, { "aria-hidden": "true", name: "times", className: cssClass("Reply--CloseIcon") })))))),
                React.createElement(index_1.TextArea, { ref: textAreaRef, className: cx(cssClass("TextField"), replyTo && cssClass("TextField--WithReply"), attachmentsArePresent && cssClass("TextField--WithAttachments"), hasMultiLineText && cssClass("TextField--MultiLine")), name: TEXT_FIELD_NAME, dataTestID: "newMessageInput", value: value, onChange: function (e) {
                        onChange(e.target.value);
                    }, onKeyDown: function (e) {
                        // Shift+Enter is a line-break.
                        // Enter alone is an attempt to Send, unless prop is
                        //  explicitly set to have enter be a newline.
                        if (e.key === KeyCode_1.default.ENTER && !e.shiftKey && !newlineOnEnter) {
                            e.preventDefault();
                            if (!isMessageSendDisabled(disableSendButton, value, attachments)) {
                                onSubmit(value.trim());
                            }
                        }
                    }, placeholder: placeholder, onBlur: function () {
                        setIsInputActive(false);
                        if (onBlur) {
                            onBlur();
                        }
                    }, onFocus: function () {
                        setIsInputActive(true);
                        if (onFocus) {
                            onFocus();
                        }
                    }, autoResize: true, 
                    // The field starts with `rows + 1` rows, so
                    //  passing in 0 gets us the desired starting height.
                    rows: 0, showUploadAttachmentButton: showUploadAttachmentButton, storeUpload: store, fileUploadCustomIcon: React.createElement(MessagingAttachmentIcon, null), uploads: (attachments === null || attachments === void 0 ? void 0 : attachments.length) > 0 && formUploadedAttachments(attachments) })),
            React.createElement(index_1.Button, { className: cssClass("SendButton"), type: "primary", value: React.createElement(index_1.FlexBox, { alignItems: "center" },
                    React.createElement(FontAwesome, { "aria-hidden": "true", name: "paper-plane" }),
                    React.createElement("span", { className: cssClass("SendText") }, sendButtonText)), disabled: isMessageSendDisabled(disableSendButton, value, attachments), onClick: function () { return onSubmit(value.trim()); }, ariaLabel: sendButtonText, dataTestID: "sendNewMessageButton" })),
        formReturnKeyInstructionsLabel(showReturnKeyInstructions, value)));
};
function isMessageSendDisabled(disableSendButton, value, attachments) {
    // disableSendButton boolean handles the case of unsendable invalid attachments
    if (disableSendButton) {
        return true;
    }
    else if (value.trim() === "" && (!attachments || attachments.length === 0)) {
        return true;
    }
    return false;
}
function formUploadedAttachments(attachments) {
    return React.createElement(index_1.FlexBox, { className: cssClass("UploadedAttachments") }, attachments);
}
function formReturnKeyInstructionsLabel(showReturnKeyInstructions, value) {
    // If showReturnKeyInstructions is not set, return undefined
    if (!showReturnKeyInstructions) {
        return undefined;
    }
    // If nothing is in the input, take up space with no text
    if (!value.trim()) {
        return React.createElement("div", { className: cssClass("InstructionsLabel--spacer") });
    }
    return (React.createElement("label", { htmlFor: TEXT_FIELD_NAME, className: cssClass("InstructionsLabel") },
        React.createElement("span", { className: cssClass("InstructionsLabel--bold") }, "Return"),
        " to send",
        React.createElement("span", { className: cx(cssClass("InstructionsLabel--bold"), cssClass("InstructionsLabel--last")) }, "Shift + Return"),
        " ",
        "to add a new line"));
}
var MessagingAttachmentIcon = function () {
    return (React.createElement("svg", { className: "FileInput--Icon", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
        React.createElement("rect", { width: "32", height: "32", rx: "4" }),
        React.createElement("path", { d: "M7 21.5805C7 22.5504 7.33857 23.3628 8.01571 24.0177C8.69286 24.6726 9.53286 25 10.5357 25C11.6929 25 12.7 24.5855 13.5571 23.7565L23.5471 14.1073C24.5157 13.154 25 12.0308 25 10.7376C25 9.4195 24.5286 8.30039 23.5857 7.38024C22.6429 6.46008 21.49 6 20.1271 6C18.7729 6 17.6029 6.46837 16.6171 7.40511L8.83857 14.9404C8.75286 15.0233 8.71 15.1145 8.71 15.214C8.71 15.3466 8.84286 15.5414 9.10857 15.7984C9.36571 16.0471 9.56286 16.1715 9.7 16.1715C9.81143 16.1715 9.91 16.13 9.99571 16.0471L17.7871 8.49935C18.4643 7.86104 19.24 7.54189 20.1143 7.54189C21.0229 7.54189 21.79 7.85275 22.4157 8.47448C23.0414 9.0962 23.3543 9.84642 23.3543 10.7251C23.3543 11.5956 23.0286 12.3458 22.3771 12.9758L12.4 22.6374C11.86 23.1597 11.2386 23.4208 10.5357 23.4208C9.98714 23.4208 9.53286 23.2467 9.17286 22.8986C8.81286 22.5504 8.63286 22.111 8.63286 21.5805C8.63286 20.9007 8.90286 20.2997 9.44286 19.7775L16.9129 12.553C17.1357 12.3541 17.3929 12.2546 17.6843 12.2546C17.9329 12.2546 18.1386 12.3333 18.3014 12.4908C18.4643 12.6483 18.5457 12.8473 18.5457 13.0877C18.5457 13.353 18.4386 13.5975 18.2243 13.8213L12.9529 18.9195C12.8671 19.0024 12.8243 19.0936 12.8243 19.1931C12.8243 19.3257 12.9571 19.5205 13.2229 19.7775C13.4886 20.0345 13.69 20.163 13.8271 20.163C13.93 20.163 14.0243 20.1215 14.11 20.0386L19.3814 14.9404C19.9214 14.4348 20.1914 13.8172 20.1914 13.0877C20.1914 12.4079 19.9471 11.8318 19.4586 11.3593C18.97 10.8868 18.3743 10.6505 17.6714 10.6505C16.9171 10.6505 16.2786 10.9116 15.7557 11.4339L8.28572 18.6584C7.42857 19.4708 7 20.4448 7 21.5805Z", fill: "#474C5E" })));
};
exports.MessagingInput = React.forwardRef(MessagingInputRenderFunction);
