"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const Widget_1 = tslib_1.__importDefault(require("../Widget"));
const react_intl_1 = require("react-intl");
const material_1 = require("@mui/material");
const react_core_1 = require("@selfcommunity/react-core");
const Editor_1 = tslib_1.__importDefault(require("../Editor"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const lab_1 = require("@mui/lab");
const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
const system_1 = require("@mui/system");
const PREFIX = 'SCCommentObjectReply';
const classes = {
    root: `${PREFIX}-root`,
    comment: `${PREFIX}-comment`,
    hasValue: `${PREFIX}-has-value`,
    avatar: `${PREFIX}-avatar`,
    actions: `${PREFIX}-actions`,
    buttonReply: `${PREFIX}-button-reply`,
    buttonSave: `${PREFIX}-button-save`,
    buttonCancel: `${PREFIX}-button-cancel`
};
const Root = (0, styles_1.styled)(BaseItem_1.default, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 *> API documentation for the Community-JS Comment Object Reply component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {CommentObjectReply} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `CommentObjectReply` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.CommentObjectReply-root|Styles applied to the root element.|
 |comment|.SCCommentObjectReply-comment|Styles applied to comment element.|
 |hasValue|.SCCommentObjectReply-has-value|Styles applied to the comment element when editor is not empty.|
 |avatar|.SCCommentObjectReply-avatar|Styles applied to the avatar element.|
 |actions|.SCCommentObjectReply-actions|Styles applied to the actions section.|
 |buttonReply|.SCCommentObjectReply-button-reply|Styles applied to reply button element.|
 |buttonSave|.SCCommentObjectReply-button-save|Styles applied to save button element.|
 |buttonCancel|.SCCommentObjectReply-button-cancel|Styles applied to the cancel button element.|

 * @param inProps
 */
function CommentObjectReply(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: PREFIX
    });
    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
    // CONTEXT
    const scUserContext = (0, react_core_1.useSCUser)();
    // RETRIEVE OBJECTS
    const [html, setHtml] = (0, react_1.useState)(text);
    // REFS
    let editor = (0, react_1.useRef)();
    /**
     * When CommentObjectReply is mount
     * if autoFocus === true focus on editor
     */
    (0, react_1.useEffect)(() => {
        autoFocus && handleEditorFocus();
    }, [autoFocus]);
    /**
     * Focus on editor
     */
    const handleEditorFocus = () => {
        if (editor.current) {
            editor.current.focus();
        }
    };
    /**
     * Handle Replay
     */
    const handleReply = () => {
        onReply && onReply(html);
    };
    /**
     * Handle Save
     */
    const handleSave = () => {
        onSave && onSave(html);
    };
    /**
     * Handle cancel save
     */
    const handleCancel = () => {
        onCancel && onCancel();
    };
    /**
     * Handle Editor change
     */
    const handleChangeText = (value) => {
        setHtml(value);
    };
    /**
     * Check if editor is empty
     */
    const isEditorEmpty = (0, react_1.useMemo)(() => {
        const _html = html.trim();
        return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
    }, [html]);
    // RENDER
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [(0, jsx_runtime_1.jsx)(Editor_1.default, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
}
exports.default = CommentObjectReply;
