import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Box, Button, Divider, Tooltip, Typography } from '@mui/material';
import Icon from '@mui/material/Icon';
import { Link, useSCFetchFeedObject, useSCRouting } from '@selfcommunity/react-core';
import { SCContributionType } from '@selfcommunity/types';
import { styled } from '@mui/material/styles';
import { SCFeedObjectTemplateType } from '../../../../types/feedObject';
import { getContributionRouteName, getRouteData } from '../../../../utils/contribution';
import classNames from 'classnames';
import Skeleton from '@mui/material/Skeleton';
import { PREFIX } from '../../constants';
const messages = defineMessages({
    comments: {
        id: 'ui.feedObject.comment.comments',
        defaultMessage: 'ui.feedObject.comment.comments'
    },
    comment: {
        id: 'ui.feedObject.comment.comment',
        defaultMessage: 'ui.feedObject.comment.comment'
    }
});
const classes = {
    root: `${PREFIX}-action-comment-root`,
    divider: `${PREFIX}-action-comment-divider`,
    inline: `${PREFIX}-action-comment-inline`,
    button: `${PREFIX}-action-comment-button`,
    viewAudienceButton: `${PREFIX}-action-comment-view-audience-button`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'ActionCommentRoot'
})(() => ({}));
export default function Comment(props) {
    // PROPS
    const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, feedObjectTemplate = SCFeedObjectTemplateType, withAction = true, withAudience = true, inlineAction = false, onViewCommentsAction, onCommentAction } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectTemplate", "withAction", "withAudience", "inlineAction", "onViewCommentsAction", "onCommentAction"]);
    // STATE
    const { obj, setObj } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType });
    // CONTEXT
    const scRoutingContext = useSCRouting();
    // INTL
    const intl = useIntl();
    /**
     * Renders comments counter
     * @return {JSX.Element}
     */
    function renderAudience() {
        let audience;
        if (withAudience) {
            if (!obj) {
                audience = (_jsx(Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: _jsx(Skeleton, { animation: "wave", height: 18, width: 50 }) })));
            }
            else {
                audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(_Fragment, { children: feedObjectTemplate === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: 'body2' }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(Button, Object.assign({ variant: "text", size: "small", component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), classes: { root: classes.viewAudienceButton } }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) })) }));
            }
        }
        return audience;
    }
    /**
     * Renders commentsCounter
     * @return {JSX.Element}
     */
    function renderCommentButton() {
        let ButtonProps = {};
        if (!onCommentAction) {
            ButtonProps = {
                component: Link,
                to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj))
            };
        }
        return (_jsx(_Fragment, { children: withAction && (_jsxs(React.Fragment, { children: [!inlineAction && withAudience && _jsx(Divider, { className: classes.divider }), _jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.comment)}` }, { children: _jsx(Button, Object.assign({ onClick: onCommentAction, className: classes.button }, ButtonProps, { children: _jsx(Icon, { children: "chat_bubble_outline" }) })) }))] })) }));
    }
    /**
     * Renders comment action
     */
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className, { [classes.inline]: inlineAction }) }, rest, { children: [renderAudience(), renderCommentButton()] })));
}
