import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { List, ListItem } from '@mui/material';
import InfiniteScroll from '../../../../../shared/InfiniteScroll';
import Typography from '@mui/material/Typography';
import { http, Endpoints } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { useSCFetchFeedObject } from '@selfcommunity/react-core';
import { SCContributionType } from '@selfcommunity/types';
import { SCOPE_SC_UI } from '../../../../../constants/Errors';
import BaseDialog from '../../../../../shared/BaseDialog';
import CentralProgress from '../../../../../shared/CentralProgress';
import User from '../../../../User';
export default function SharesDialog(props) {
    // PROPS
    const { id = null, feedObject = null, feedObjectType = feedObject ? feedObject.type : SCContributionType.POST, open = false, onClose = null } = props, rest = __rest(props, ["id", "feedObject", "feedObjectType", "open", "onClose"]);
    // STATE
    const { obj, setObj } = useSCFetchFeedObject({ id, feedObject, feedObjectType });
    const [isLoading, setIsLoading] = useState(Boolean((id && feedObjectType) || feedObject));
    const [shares, setShares] = useState([]);
    const [next, setNext] = useState(id && feedObjectType
        ? `${Endpoints.ShareUsersList.url({ type: feedObjectType, id: id })}`
        : feedObject && feedObjectType
            ? `${Endpoints.ShareUsersList.url({ type: feedObjectType, id: feedObject.id })}`
            : null);
    /**
     * On mount, fetches shares
     */
    useEffect(() => {
        if (obj && next) {
            fetchShares();
        }
    }, [`${obj}`]);
    /**
     * Fetches shares
     */
    function fetchShares() {
        setIsLoading(true);
        http
            .request({
            url: next,
            method: Endpoints.ShareUsersList.method
        })
            .then((res) => {
            const data = res.data;
            setShares([...shares, ...data.results]);
            setIsLoading(false);
            setNext(data.next !== null ? data.next : null);
        })
            .catch((error) => {
            Logger.error(SCOPE_SC_UI, error);
        });
    }
    /**
     * Renders shares dialog
     */
    return (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.sharesDialog.title", id: "ui.feedObject.sharesDialog.title" }), onClose: onClose, open: open }, rest, { children: isLoading ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: shares.length, next: fetchShares, hasMoreNext: next !== null, loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.sharesDialog.noOtherLikes", defaultMessage: "ui.feedObject.sharesDialog.noOtherLikes" }) })) }, { children: _jsx(List, { children: shares.slice(0, 4).map((user, index) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: user }, index) }, user.id))) }) }))) })));
}
