import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useContext } from 'react';
import Box from '@mui/material/Box';
import Menu from '@mui/material/Menu';
import Tooltip from '@mui/material/Tooltip';
import { Button, ListItemButton, ListItemText, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
import Icon from '@mui/material/Icon';
import { styled } from '@mui/material/styles';
import { SCFeedObjectActivitiesType } from '../../../../types/feedObject';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { camelCase } from '@selfcommunity/utils';
import { SCPreferences, SCPreferencesContext, useSCUser } from '@selfcommunity/react-core';
import classNames from 'classnames';
import { PREFIX } from '../../constants';
const messages = defineMessages({
    relevantActivities: {
        id: 'ui.feedObject.activitiesMenu.relevantActivities',
        defaultMessage: 'ui.feedObject.activitiesMenu.relevantActivities'
    },
    recentComments: {
        id: 'ui.feedObject.activitiesMenu.recentComments',
        defaultMessage: 'ui.feedObject.activitiesMenu.recentComments'
    },
    firstComments: {
        id: 'ui.feedObject.activitiesMenu.firstComments',
        defaultMessage: 'ui.feedObject.activitiesMenu.firstComments'
    },
    followedComments: {
        id: 'ui.feedObject.activitiesMenu.followedComments',
        defaultMessage: 'ui.feedObject.activitiesMenu.followedComments'
    },
    connectionsComments: {
        id: 'ui.feedObject.activitiesMenu.connectionsComments',
        defaultMessage: 'ui.feedObject.activitiesMenu.connectionsComments'
    }
});
const classes = {
    root: `${PREFIX}-activities-menu-root`,
    selector: `${PREFIX}-activities-menu-selector`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'ActivitiesMenuRoot'
})(() => ({}));
export default function ActivitiesMenu(props) {
    // PROPS
    const { className = null, selectedActivities = null, hideRelevantActivitiesItem = false, onChange = null } = props, rest = __rest(props, ["className", "selectedActivities", "hideRelevantActivitiesItem", "onChange"]);
    // CONTEXT
    const scPreferencesContext = useContext(SCPreferencesContext);
    const scUserContext = useSCUser();
    // STATE
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    const followEnabled = scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value;
    const [anchorEl, setAnchorEl] = React.useState(null);
    const open = Boolean(anchorEl);
    // INTL
    const intl = useIntl();
    // HANDLERS
    const handleOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    const handleChangeActivitiesType = (type) => {
        return () => {
            onChange && onChange(type);
        };
    };
    function renderMenuContent() {
        return (_jsxs(Box, { children: [!hideRelevantActivitiesItem && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.relevantActivities) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc', defaultMessage: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc' }) }) }))), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RECENT_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RECENT_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.recentComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.recentCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.recentCommentsDesc' }) }) })), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.FIRST_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.firstComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.firstCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.firstCommentsDesc' }) }) })), scUserContext.user && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: followEnabled ? intl.formatMessage(messages.followedComments) : intl.formatMessage(messages.connectionsComments) }), secondary: followEnabled ? (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.followedCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.followedCommentsDesc' })) : (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc' })) }) })))] }));
    }
    /**
     * Renders root object
     */
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Box, Object.assign({ className: classes.selector }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.tooltipTitle", defaultMessage: "ui.feedObject.activitiesMenu.tooltipTitle" }) }, { children: _jsxs(Button, Object.assign({ variant: "text", size: "small", onClick: handleOpen }, { children: [selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS && followEnabled
                                ? intl.formatMessage(messages.followedComments)
                                : intl.formatMessage(messages[`${camelCase(selectedActivities)}`]), "\u00A0 ", _jsx(Icon, { children: "expand_more" })] })) })) })), isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuContent() }))) : (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, PaperProps: {
                    elevation: 0,
                    sx: {
                        overflow: 'visible',
                        filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
                        mt: 1.5,
                        '&:before': {
                            content: '""',
                            display: 'block',
                            position: 'absolute',
                            top: 0,
                            right: 14,
                            width: 10,
                            height: 10,
                            bgcolor: 'background.paper',
                            transform: 'translateY(-50%) rotate(45deg)',
                            zIndex: 0
                        }
                    }
                }, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, { children: renderMenuContent() })))] })));
}
