"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 pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
const types_1 = require("@selfcommunity/types");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const PrivateMessageSnippetItem_1 = tslib_1.__importDefault(require("../PrivateMessageSnippetItem"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const system_1 = require("@mui/system");
const react_intl_1 = require("react-intl");
const react_core_1 = require("@selfcommunity/react-core");
const utils_1 = require("@selfcommunity/utils");
const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
const constants_1 = require("./constants");
const messages = (0, react_intl_1.defineMessages)({
    placeholder: {
        id: 'ui.privateMessage.snippets.searchBar.placeholder',
        defaultMessage: 'ui.privateMessage.snippets.searchBar.placeholder'
    }
});
const classes = {
    root: `${constants_1.PREFIX}-root`,
    searchBar: `${constants_1.PREFIX}-search-bar`,
    icon: `${constants_1.PREFIX}-icon`,
    input: `${constants_1.PREFIX}-input`,
    clear: `${constants_1.PREFIX}-clear`,
    newMessageButton: `${constants_1.PREFIX}-new-message-button`
};
const Root = (0, styles_1.styled)(material_1.Card, {
    name: constants_1.PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS PrivateMessageSnippets component. Learn about the available props and the CSS API.
 *
 *
 * This component renders the list of conversations preview between users.
 * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/Snippets)

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCPrivateMessageSnippets-root|Styles applied to the root element.|
 |icon|.SCPrivateMessageSnippets-icon|Styles applied to the search icon element.|
 |input|.SCPrivateMessageSnippets-input|Styles applied to the search input element.|
 |clear|.SCPrivateMessageSnippets-clear|Styles applied to the search bar clear icon element.|
 |searchBar|.SCPrivateMessageSnippets-searchBar|Styles applied to the search bar element.|
 |newMessageButton|.SCPrivateMessageSnippets-new-message-button|Styles applied to new message button element.|

 * @param inProps
 */
function PrivateMessageSnippets(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { className = null, threadObj = null, type = null, snippetActions, clearSearch } = props, rest = tslib_1.__rest(props, ["className", "threadObj", "type", "snippetActions", "clearSearch"]);
    // STATE
    const theme = (0, material_1.useTheme)();
    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
    const { data, updateSnippets } = (0, react_core_1.useSCFetchPrivateMessageSnippets)({ cacheStrategy: utils_1.CacheStrategies.CACHE_FIRST });
    const [search, setSearch] = (0, react_1.useState)('');
    const isObj = typeof threadObj === 'object';
    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
    const authUserId = scUserContext.user ? scUserContext.user.id : null;
    const [_type, _setType] = (0, react_1.useState)(type);
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    // REFS
    const refreshSubscription = (0, react_1.useRef)(null);
    // CONST
    const filteredSnippets = data.snippets.filter((el) => {
        var _a;
        if (search === '') {
            return el;
        }
        else if (el.group) {
            return el.group.slug.includes(search.toLowerCase());
        }
        else if (((_a = el === null || el === void 0 ? void 0 : el.receiver) === null || _a === void 0 ? void 0 : _a.id) === authUserId) {
            return el.sender.username.includes(search.toLowerCase());
        }
        return el.receiver.username.includes(search.toLowerCase());
    });
    const messageReceiver = (item, loggedUserId, obj) => {
        var _a, _b, _c, _d;
        if (obj) {
            return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
        }
        return ((_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id) !== loggedUserId ? (_c = item === null || item === void 0 ? void 0 : item.receiver) === null || _c === void 0 ? void 0 : _c.id : (_d = item === null || item === void 0 ? void 0 : item.sender) === null || _d === void 0 ? void 0 : _d.id;
    };
    const isSelected = (0, react_1.useMemo)(() => {
        return (message) => {
            var _a, _b;
            if (threadObj && _type === types_1.SCPrivateMessageType.GROUP) {
                return ((_a = message === null || message === void 0 ? void 0 : message.group) === null || _a === void 0 ? void 0 : _a.id) === (isObj ? (_b = threadObj === null || threadObj === void 0 ? void 0 : threadObj.group) === null || _b === void 0 ? void 0 : _b.id : threadObj);
            }
            else if (threadObj && threadObj !== types_1.SCPrivateMessageType.NEW) {
                return messageReceiver(message, authUserId) === (isObj ? messageReceiver(threadObj, authUserId) : threadObj);
            }
            return null;
        };
    }, [threadObj, authUserId, _type]);
    //HANDLERS
    const handleChange = (event) => {
        setSearch(event.target.value);
    };
    const handleClear = () => {
        setSearch('');
    };
    const handleOpenNewMessage = () => {
        snippetActions && snippetActions.onNewMessageClick();
        handleClear();
    };
    const handleDeleteConversation = (msg) => {
        snippetActions && snippetActions.onDeleteConfirm(msg);
    };
    function handleOpenThread(msg) {
        const threadType = msg.group !== null ? types_1.SCPrivateMessageType.GROUP : types_1.SCPrivateMessageType.USER;
        _setType(threadType);
        snippetActions && snippetActions.onSnippetClick(msg, threadType);
        handleClear();
        updateSnippetsParams(msg.id, 'seen');
    }
    /**
     * Updates snippet headline and status or just snippet status
     * @param threadId
     * @param status
     * @param headline
     */
    function updateSnippetsParams(threadId, status, headline) {
        const newSnippets = [...data.snippets];
        const index = newSnippets.findIndex((s) => s.id === threadId);
        if (index !== -1) {
            newSnippets[index].headline = headline !== null && headline !== void 0 ? headline : newSnippets[index].headline;
            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
            // @ts-ignore
            newSnippets[index].thread_status = status;
            updateSnippets(newSnippets);
        }
    }
    function handleSnippetsUpdate(message, forDeletion, type) {
        const newSnippets = [...data.snippets];
        if (forDeletion && type === types_1.SCPrivateMessageType.USER) {
            const _snippets = newSnippets.filter((s) => messageReceiver(s, authUserId) !== message);
            updateSnippets(_snippets);
        }
        else if (forDeletion && types_1.SCPrivateMessageType.GROUP) {
            const _snippets = newSnippets.filter((s) => { var _a; return ((_a = s === null || s === void 0 ? void 0 : s.group) === null || _a === void 0 ? void 0 : _a.id) !== message; });
            updateSnippets(_snippets);
        }
        else {
            let temp = [...data.snippets];
            message.map((m) => {
                const idx = newSnippets.findIndex((s) => 
                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                // @ts-ignore
                Object.prototype.hasOwnProperty.call(s, 'thread_id') ? s.thread_id === m.thread_id : s.id === m.thread_id);
                if (idx !== -1) {
                    temp[idx].headline = m.message;
                    temp[idx].thread_status = m.status === types_1.SCPrivateMessageStatusType.NEW ? m.status : m.thread_status;
                    const element = temp.splice(idx, 1)[0];
                    temp.unshift(element);
                }
                else {
                    temp.unshift(m);
                }
                updateSnippets(temp);
            });
        }
    }
    /**
     * Notification subscriber
     */
    const subscriber = (msg, data) => {
        const res = data.data;
        updateSnippetsParams(res.thread_id, res.notification_obj.snippet.thread_status, res.notification_obj.snippet.headline);
    };
    /**
     * When a ws notification arrives, updates data
     */
    (0, react_1.useEffect)(() => {
        refreshSubscription.current = pubsub_js_1.default.subscribe(`${types_1.SCNotificationTopicType.INTERACTION}.${types_1.SCNotificationTypologyType.PRIVATE_MESSAGE}`, subscriber);
        return () => {
            pubsub_js_1.default.unsubscribe(refreshSubscription.current);
        };
    }, [data.snippets]);
    (0, react_1.useEffect)(() => {
        if (clearSearch)
            handleClear();
    }, [clearSearch]);
    /**
     * Thread/ Private Message Component subscriptions handlers
     */
    (0, react_1.useEffect)(() => {
        const threadSubscriber = pubsub_js_1.default.subscribe('snippetsChannel', (msg, data) => {
            handleSnippetsUpdate(data);
        });
        const snippetsSubscriber = pubsub_js_1.default.subscribe('snippetsChannelDelete', (msg, data) => {
            handleSnippetsUpdate(data, true, types_1.SCPrivateMessageType.USER);
        });
        const snippetsGroupSubscriber = pubsub_js_1.default.subscribe('snippetsChannelDeleteGroup', (msg, data) => {
            handleSnippetsUpdate(data, true, types_1.SCPrivateMessageType.GROUP);
        });
        return () => {
            pubsub_js_1.default.unsubscribe(threadSubscriber);
            pubsub_js_1.default.unsubscribe(snippetsSubscriber);
            pubsub_js_1.default.unsubscribe(snippetsGroupSubscriber);
        };
    }, [data.snippets]);
    //RENDERING
    /**
     * Renders snippets skeleton when loading
     */
    if (data.isLoading) {
        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 });
    }
    /**
     * Renders the component
     */
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" }) })), data.snippets.length !== 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${constants_1.PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, InputProps: {
                                className: classes.input,
                                startAdornment: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })),
                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.clear, disabled: !search, onClick: handleClear, size: "small" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) })))
                            } }), (0, jsx_runtime_1.jsx)(material_1.List, { children: filteredSnippets.map((message) => ((0, jsx_runtime_1.jsx)(PrivateMessageSnippetItem_1.default, { message: message, onItemClick: () => handleOpenThread(message), secondaryAction: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [message.thread_status === types_1.SCPrivateMessageStatusType.NEW && (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "secondary" }, { children: "fiber_manual_record" })), !isMobile && ((0, jsx_runtime_1.jsx)(PrivateMessageSettingsIconButton_1.default, { threadToDelete: (message === null || message === void 0 ? void 0 : message.group) ? message.group.id : messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)), user: messageReceiver(message, authUserId, true), group: message === null || message === void 0 ? void 0 : message.group }))] }), selected: isSelected(message) }, message.id))) })] }))] }) })));
}
exports.default = PrivateMessageSnippets;
