import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Grid, useMediaQuery, useTheme } from '@mui/material';
import { useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { SCFeatureName, SCPrivateMessageStatusType, SCPrivateMessageType } from '@selfcommunity/types';
import PrivateMessageThread from '../PrivateMessageThread';
import PrivateMessageSnippets from '../PrivateMessageSnippets';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-root`,
    snippetsBox: `${PREFIX}-snippets-box`,
    threadBox: `${PREFIX}-thread-box`,
    hide: `${PREFIX}-hide`
};
const Root = styled(Grid, {
    name: 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
 */
export default function PrivateMessageComponent(inProps) {
    //PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { id = null, type = null, className = null, onItemClick = null, onThreadBack = null, onSingleMessageOpen = null } = props, rest = __rest(props, ["id", "type", "className", "onItemClick", "onThreadBack", "onSingleMessageOpen"]);
    // CONTEXT
    const scUserContext = useSCUser();
    const scPreferences = useSCPreferences();
    // STATE
    const theme = useTheme();
    const [clear, setClear] = useState(false);
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    const [layout, setLayout] = useState('default');
    const [obj, setObj] = useState(id !== null && id !== void 0 ? id : null);
    const [_type, _setType] = useState(type);
    const isNew = obj && obj === SCPrivateMessageStatusType.NEW;
    const [openNewMessage, setOpenNewMessage] = 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 = useMemo(() => scPreferences.features.includes(SCFeatureName.PRIVATE_MESSAGING), [scPreferences.features]);
    const authUserId = useMemo(() => (scUserContext.user ? scUserContext.user.id : null), [scUserContext.user]);
    useEffect(() => {
        setObj(id !== null && id !== void 0 ? id : null);
    }, [id]);
    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(SCPrivateMessageStatusType.NEW);
        _setType(SCPrivateMessageType.NEW);
        onItemClick && onItemClick(SCPrivateMessageStatusType.NEW, SCPrivateMessageType.NEW);
    };
    /**
     * Handles new messages open from user profile page or notifications section
     */
    const handleSingleMessage = (open) => {
        open && onSingleMessageOpen(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 ? SCPrivateMessageType.GROUP : 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 (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 5, className: classNames(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: _jsx(PrivateMessageSnippets, { snippetActions: {
                    onSnippetClick: handleThreadOpening,
                    onNewMessageClick: handleOpenNewMessage,
                    onDeleteConfirm: handleDeleteThread
                }, threadObj: obj, clearSearch: clear, elevation: 0, type: _type }) })));
    }
    /**
     * Renders thread section
     */
    function renderThread() {
        return (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 7, className: classNames(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: _jsx(PrivateMessageThread, { 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 (_jsxs(Root, Object.assign({ container: true }, rest, { className: classNames(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
}
