"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WorkflowComments = void 0;
var react_1 = __importStar(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var Input_1 = __importDefault(require("@mui/material/Input"));
var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
var Send_1 = __importDefault(require("@mui/icons-material/Send"));
var CollapsedComments_1 = require("./components/CollapsedComments");
var ExpandedComments_1 = require("./components/ExpandedComments");
var useWorkflowComments_1 = require("../hooks/useWorkflowComments");
var SmallIconButton_1 = require("../../../SmallIconButton");
var WorkflowActionButtons_1 = require("../WorkflowActionButtons");
var WorkflowComments_module_css_1 = __importDefault(require("./WorkflowComments.module.css"));
var WorkflowComments = function (_a) {
    var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen, preferredAction = _a.preferredAction, _b = _a.showActionButtons, showActionButtons = _b === void 0 ? true : _b, _c = _a.alwaysExpanded, alwaysExpanded = _c === void 0 ? false : _c, classes = _a.classes, onCommentWrite = _a.onCommentWrite;
    var _d = (0, react_1.useState)(false), expanded = _d[0], setExpanded = _d[1];
    var _e = (0, react_1.useState)(''), comment = _e[0], setComment = _e[1];
    var _f = (0, useWorkflowComments_1.useWorkflowComments)({
        processInstanceComments: processInstanceComments,
        taskId: taskId,
        isOpen: isTaskOpen,
        onCommentWrite: onCommentWrite
    }), comments = _f.comments, writeComment = _f.writeComment, readOnly = _f.readOnly;
    var sendComment = (0, react_1.useCallback)(function () {
        writeComment(comment);
        setComment('');
    }, [comment, writeComment]);
    var handleChange = (0, react_1.useCallback)(function (event) {
        setComment(event.target.value);
    }, []);
    var handleKeyPress = (0, react_1.useCallback)(function (e) {
        if (e.key === 'Enter') {
            if (comment.length > 0 && !e.shiftKey) {
                e.preventDefault();
                sendComment();
            }
            if (comment.length > 0 && e.shiftKey) {
                return;
            }
            e.preventDefault();
        }
    }, [comment, sendComment]);
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(WorkflowComments_module_css_1.default.container, classes === null || classes === void 0 ? void 0 : classes.container) },
        react_1.default.createElement("div", { className: WorkflowComments_module_css_1.default.title },
            " ",
            ui_i18n_1.default.text('Comments'),
            " "),
        react_1.default.createElement("div", { className: (0, classnames_1.default)(WorkflowComments_module_css_1.default.commentsContainer, classes === null || classes === void 0 ? void 0 : classes.commentsContainer) }, expanded || alwaysExpanded || comments.length < 3 ? (react_1.default.createElement(ExpandedComments_1.ExpandedComments, { comments: comments })) : (react_1.default.createElement(CollapsedComments_1.CollapsedComments, { onClick: function () { return setExpanded(true); }, comments: comments }))),
        !readOnly && (react_1.default.createElement(Input_1.default, { endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end", className: WorkflowComments_module_css_1.default.sendButton },
                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: WorkflowComments_module_css_1.default.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: handleKeyPress, onChange: handleChange, disableUnderline: true, multiline: true })),
        showActionButtons && (react_1.default.createElement("div", { className: WorkflowComments_module_css_1.default.modeSwitcherWrapper },
            react_1.default.createElement(WorkflowActionButtons_1.WorkflowActionButtons, { workflowActions: actions, actionRequestIsInProgress: actionRequestIsInProgress, preferredAction: preferredAction, comment: comment })))));
};
exports.WorkflowComments = WorkflowComments;
