import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useMemo } from 'react';
import { styled } from '@mui/material/styles';
import { Avatar, ListItemButton, ListItemAvatar, ListItemText, Typography, Chip, ListItem } from '@mui/material';
import PrivateMessageSnippetItemSkeleton from './Skeleton';
import { useIntl } from 'react-intl';
import { SCPrivateMessageStatusType } from '@selfcommunity/types';
import { SCUserContext, SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import UserAvatar from '../../shared/UserAvatar';
import { PREFIX } from './constants';
const classes = {
    root: `${PREFIX}-root`,
    username: `${PREFIX}-username`,
    badgeLabel: `${PREFIX}-badge-label`,
    time: `${PREFIX}-time`,
    menuItem: `${PREFIX}-menu-item`,
    unread: `${PREFIX}-unread`
};
const Root = styled(ListItem, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
const PREFERENCES = [SCPreferences.STAFF_STAFF_BADGE_LABEL, SCPreferences.STAFF_STAFF_BADGE_ICON];
/**
 * > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCPrivateMessageSnippetItem-root|Styles applied to the root element.|
 |username|.SCPrivateMessageSnippetItem-username|Styles applied to the username element.|
 |badgeLabel|.SCPrivateMessageSnippetItem-badgeLabel|Styles applied to the badgeLabel element.|
 |time|.SCPrivateMessageSnippetItem-time|Styles applied to the time element.|
 |menuItem|.SCPrivateMessageSnippetItem-menu-item|Styles applied to the menu item element.|
 |unread|.SCPrivateMessageSnippetItem-unread|Styles applied to snippet item if there's an unread message.|

 * @param inProps
 */
export default function PrivateMessageSnippetItem(inProps) {
    var _a, _b, _c, _d;
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { message = null, className = null, onItemClick = null, secondaryAction = null } = props, rest = __rest(props, ["message", "className", "onItemClick", "secondaryAction"]);
    // CONTEXT
    const scUserContext = useContext(SCUserContext);
    // PREFERENCES
    const scPreferences = useSCPreferences();
    const preferences = useMemo(() => {
        const _preferences = {};
        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
        return _preferences;
    }, [scPreferences.preferences]);
    // INTL
    const intl = useIntl();
    // STATE
    const hasBadge = () => {
        var _a;
        if (message.receiver) {
            if ((message === null || message === void 0 ? void 0 : message.receiver.id) !== ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id)) {
                return message === null || message === void 0 ? void 0 : message.receiver.community_badge;
            }
            return message === null || message === void 0 ? void 0 : message.sender.community_badge;
        }
    };
    if (!message) {
        return _jsx(PrivateMessageSnippetItemSkeleton, { elevation: 0 });
    }
    /**
     * Renders root object
     */
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { secondaryAction: secondaryAction, disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ onClick: onItemClick, classes: { root: classNames({ [classes.unread]: message.thread_status === SCPrivateMessageStatusType.NEW }) } }, { children: [_jsx(ListItemAvatar, { children: _jsx(UserAvatar, Object.assign({ hide: !hasBadge() }, { children: message.group ? (_jsx(Avatar, { alt: message.group.name, src: message.group.image_big })) : (_jsx(Avatar, { alt: ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) === message.receiver.username ? message.sender.username : message.receiver.username, src: ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.username) === message.receiver.username ? message.sender.avatar : message.receiver.avatar })) })) }), _jsx(ListItemText, { primary: _jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ component: "span", className: classes.username }, { children: message.group
                                    ? message.group.name
                                    : ((_c = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _c === void 0 ? void 0 : _c.username) === message.receiver.username
                                        ? message.sender.username
                                        : message.receiver.username })), hasBadge() && preferences && (_jsx(Chip, { component: "span", className: classes.badgeLabel, size: "small", label: preferences[SCPreferences.STAFF_STAFF_BADGE_LABEL] })), _jsx(Typography, Object.assign({ color: "secondary", className: classes.time, component: "span" }, { children: `${intl.formatDate(message.last_message_at, {
                                    day: '2-digit',
                                    month: '2-digit',
                                    year: '2-digit'
                                })}` }))] }), secondary: _jsx(_Fragment, { children: _jsx(Typography, { component: "span", color: "text.secondary", dangerouslySetInnerHTML: { __html: (_d = message.headline) !== null && _d !== void 0 ? _d : message.message } }) }) })] })) })));
}
