"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 material_1 = require("@mui/material");
const react_core_1 = require("@selfcommunity/react-core");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const types_1 = require("@selfcommunity/types");
const PrivateMessageThread_1 = tslib_1.__importDefault(require("../PrivateMessageThread"));
const PrivateMessageSnippets_1 = tslib_1.__importDefault(require("../PrivateMessageSnippets"));
const constants_1 = require("./constants");
const classes = {
    root: `${constants_1.PREFIX}-root`,
    snippetsBox: `${constants_1.PREFIX}-snippets-box`,
    threadBox: `${constants_1.PREFIX}-thread-box`,
    hide: `${constants_1.PREFIX}-hide`
};
const Root = (0, styles_1.styled)(material_1.Grid, {
    name: constants_1.PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 *
 * > API documentation for the Community-JS Private Messages component. Learn about the available props and the CSS API.
 *
 *
 * This component renders the private messages section.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/PrivateMessages)

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCPrivateMessageComponent-root|Styles applied to the root element.|
 |snippetsBox|.SCPrivateMessageComponent-snippets-box|Styles applied to the snippets box element.|
 |threadBox|.SCPrivateMessageComponent-thread-box|Styles applied to the thread box element.|
 |hide|.SCPrivateMessageComponent-hide|Styles applied to the snippetBox or threadBox grid item element on mobile view.|

 * @param inProps
 */
function PrivateMessageComponent(inProps) {
    //PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { id = null, type = null, className = null, onItemClick = null, onThreadBack = null, onSingleMessageOpen = null } = props, rest = tslib_1.__rest(props, ["id", "type", "className", "onItemClick", "onThreadBack", "onSingleMessageOpen"]);
    // CONTEXT
    const scUserContext = (0, react_core_1.useSCUser)();
    const scPreferences = (0, react_core_1.useSCPreferences)();
    // STATE
    const theme = (0, material_1.useTheme)();
    const [clear, setClear] = (0, react_1.useState)(false);
    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
    const [layout, setLayout] = (0, react_1.useState)('default');
    const [obj, setObj] = (0, react_1.useState)(id !== null && id !== void 0 ? id : null);
    const [_type, _setType] = (0, react_1.useState)(type);
    const isNew = obj && obj === types_1.SCPrivateMessageStatusType.NEW;
    const [openNewMessage, setOpenNewMessage] = (0, react_1.useState)(isNew !== null && isNew !== void 0 ? isNew : false);
    const mobileSnippetsView = (layout === 'default' && !obj) || (layout === 'mobile' && !obj);
    const mobileThreadView = (layout === 'default' && obj) || (layout === 'mobile' && obj);
    const messageReceiver = (item, loggedUserId) => {
        var _a, _b, _c;
        if (typeof item === 'number') {
            return item;
        }
        return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
    };
    // MEMO
    const privateMessagingEnabled = (0, react_1.useMemo)(() => scPreferences.features.includes(types_1.SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
    const authUserId = (0, react_1.useMemo)(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
    (0, react_1.useEffect)(() => {
        setObj(id !== null && id !== void 0 ? id : null);
    }, [id]);
    (0, react_1.useEffect)(() => {
        _setType(type !== null && type !== void 0 ? type : null);
    }, [type]);
    //  HANDLERS
    /**
     * Handles thread opening on click
     * @param item
     * @param type
     */
    const handleThreadOpening = (item, type) => {
        onItemClick && onItemClick(item.group ? item.group.id : messageReceiver(item, authUserId), type);
        _setType(type);
        setObj(item.group ? item : messageReceiver(item, authUserId));
        setOpenNewMessage(false);
    };
    /**
     * Handles thread closing after delete
     */
    const handleThreadClosing = () => {
        setObj(null);
        onThreadBack && onThreadBack();
    };
    /**
     * Handles new message opening on button action click
     */
    const handleOpenNewMessage = () => {
        setOpenNewMessage(!openNewMessage);
        setObj(types_1.SCPrivateMessageStatusType.NEW);
        _setType(types_1.SCPrivateMessageType.NEW);
        onItemClick && onItemClick(types_1.SCPrivateMessageStatusType.NEW, types_1.SCPrivateMessageType.NEW);
    };
    /**
     * Handles new messages open from user profile page or notifications section
     */
    const handleSingleMessage = (open) => {
        open && onSingleMessageOpen(types_1.SCPrivateMessageStatusType.NEW);
    };
    /**
     * Handles Layout update when new message section gets closed
     */
    const handleMessageBack = () => {
        setLayout('default');
        id && setLayout('mobile');
        setOpenNewMessage(false);
        setObj(null);
        _setType(null);
        onThreadBack && onThreadBack();
    };
    /**
     * Handles state update when a new message is sent
     */
    const handleOnNewMessageSent = (msg, isOne) => {
        onItemClick && onItemClick(isOne ? messageReceiver(msg, authUserId) : '', msg.group ? types_1.SCPrivateMessageType.GROUP : types_1.SCPrivateMessageType.USER);
        setObj(isOne ? messageReceiver(msg, authUserId) : null);
        setOpenNewMessage(false);
    };
    /**
     * Handles thread deletion
     */
    function handleDeleteThread(deletingThread) {
        deletingThread === messageReceiver(obj, authUserId) && handleThreadClosing();
        setClear(true);
    }
    /**
     * Renders snippets section
     */
    function renderSnippets() {
        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5, className: (0, classnames_1.default)(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageSnippets_1.default, { snippetActions: {
                    onSnippetClick: handleThreadOpening,
                    onNewMessageClick: handleOpenNewMessage,
                    onDeleteConfirm: handleDeleteThread
                }, threadObj: obj, clearSearch: clear, elevation: 0, type: _type }) })));
    }
    /**
     * Renders thread section
     */
    function renderThread() {
        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7, className: (0, classnames_1.default)(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageThread_1.default, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
    }
    /**
     * Renders the component (if not hidden by autoHide prop)
     */
    if (!authUserId || !privateMessagingEnabled) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true }, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
}
exports.default = PrivateMessageComponent;
