import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { CacheStrategies } from '@selfcommunity/utils';
import { useSCFetchContributors } from '@selfcommunity/react-core';
import { Avatar, AvatarGroup, Box, Button, List, ListItem, Typography } from '@mui/material';
import { FormattedMessage } from 'react-intl';
import BaseDialog from '../../../shared/BaseDialog';
import CentralProgress from '../../../shared/CentralProgress';
import InfiniteScroll from '../../../shared/InfiniteScroll';
import User from '../../User';
import classNames from 'classnames';
import ContributorsSkeleton from './Skeleton';
import { PREFIX } from '../constants';
const classes = {
    root: `${PREFIX}-contributors-root`,
    avatarGroup: `${PREFIX}-contributors-avatarGroup`,
    btnParticipants: `${PREFIX}-contributors-btn-participants`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'ContributorsRoot'
})(() => ({}));
export default function ContributorsFeedObject(props) {
    // PROPS
    const { className = null, feedObjectId = null, feedObject = null, feedObjectType = null, ContributorsSkeletonProps = {}, cacheStrategy = CacheStrategies.CACHE_FIRST } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "ContributorsSkeletonProps", "cacheStrategy"]);
    const contributorsObject = useSCFetchContributors({
        id: feedObjectId,
        feedObject,
        feedObjectType,
        pageSize: 10,
        cacheStrategy
    });
    // STATE
    const [openContributorsDialog, setOpenContributorsDialog] = useState(false);
    /**
     * On mount fetches contributors
     */
    useEffect(() => {
        if (contributorsObject.feedObject) {
            contributorsObject.getNextPage();
        }
    }, [contributorsObject.feedObject]);
    /**
     * Renders root object (if obj)
     */
    if (!contributorsObject.feedObject) {
        return null;
    }
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? (_jsx(ContributorsSkeleton, Object.assign({}, ContributorsSkeletonProps))) : (_jsx(_Fragment, { children: contributorsObject.contributors.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [_jsx(FormattedMessage, { id: 'ui.feedObject.contributors.participants', defaultMessage: 'ui.feedObject.contributors.participants' }), ":", _jsxs(AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((x, i) => (_jsx(Avatar, {}, i)))] }))] })), openContributorsDialog && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.contributors.title", id: "ui.feedObject.contributors.title", values: { total: contributorsObject.total } }), onClose: () => setOpenContributorsDialog(false), open: openContributorsDialog }, { children: contributorsObject.isLoadingNext ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: contributorsObject.contributors.length, next: contributorsObject.getNextPage(), hasMoreNext: Boolean(contributorsObject.next), loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.contributors.noOtherContributors", defaultMessage: "ui.feedObject.contributors.noOtherContributors" }) })) }, { children: _jsx(List, { children: contributorsObject.contributors.map((c, i) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: c, sx: { m: 0 }, onClick: () => setOpenContributorsDialog(false) }, c.id) }, i))) }) }))) })))] })) : null })) }) })));
}
