import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, List, ListItem, styled, Typography } from '@mui/material';
import { Endpoints, http } from '@selfcommunity/api-services';
import { Logger } from '@selfcommunity/utils';
import { useSnackbar } from 'notistack';
import PubSub from 'pubsub-js';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
import BaseDialog from '../../shared/BaseDialog';
import InfiniteScroll from '../../shared/InfiniteScroll';
import { actionWidgetTypes } from '../../utils/widget';
import AcceptRequestUserEventButton from '../AcceptRequestUserEventButton';
import EventInviteButton from '../EventInviteButton';
import InviteUserEventButton from '../InviteUserEventButton';
import User, { UserSkeleton } from '../User';
import { PREFIX } from './constants';
import { TabContentEnum } from './types';
const classes = {
    actionButton: `${PREFIX}-action-button`,
    eventButton: `${PREFIX}-event-button`,
    dialogRoot: `${PREFIX}-dialog-root`,
    infiniteScroll: `${PREFIX}-infinite-scroll`,
    endMessage: `${PREFIX}-end-message`
};
const DialogRoot = styled(BaseDialog, {
    name: PREFIX,
    slot: 'DialogRoot',
    overridesResolver: (_props, styles) => styles.dialogRoot
})(() => ({}));
export default function TabContentComponent(props) {
    // PROPS
    const { tabValue, state, dispatch, userProps, dialogProps, actionProps, handleRefresh } = props;
    // STATE
    const [openDialog, setOpenDialog] = useState(false);
    // REFS
    const updatesInvited = useRef(null);
    const updatesParticipants = useRef(null);
    // HOOKS
    const { enqueueSnackbar } = useSnackbar();
    // CONSTS
    const users = useMemo(() => (tabValue === TabContentEnum.REQUESTS ? actionProps === null || actionProps === void 0 ? void 0 : actionProps.users : state.results), [tabValue, actionProps, state]);
    // EFFECTS
    useEffect(() => {
        updatesInvited.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.INVITE_MEMBER}`, handleInviteMember);
        updatesParticipants.current = PubSub.subscribe(`${SCTopicType.EVENT}.${SCGroupEventType.ADD_MEMBER}`, handleToggleMember);
        return () => {
            updatesInvited.current && PubSub.unsubscribe(updatesInvited.current);
            updatesParticipants.current && PubSub.unsubscribe(updatesParticipants.current);
        };
    }, []);
    // HANDLERS
    /**
     * Handles pagination
     */
    const handleNext = useCallback(() => {
        dispatch({ type: actionWidgetTypes.LOADING_NEXT });
        http
            .request({
            url: state.next,
            method: Endpoints.UserSuggestion.method
        })
            .then((res) => {
            dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
        })
            .catch((error) => {
            Logger.error(SCOPE_SC_UI, error);
        });
    }, [state.next, state.isLoadingNext, state.initialized]);
    const handleToggleDialogOpen = useCallback(() => {
        setOpenDialog((prev) => !prev);
    }, []);
    const handleToggleMember = useCallback(() => {
        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentEnum.PARTICIPANTS);
    }, []);
    const handleInviteMember = useCallback(() => {
        handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(TabContentEnum.INVITED);
    }, []);
    const getActionsComponent = useCallback((userId) => {
        if (tabValue === TabContentEnum.INVITED && actionProps) {
            const _handleInvitations = (invited) => {
                var _a, _b;
                if (invited) {
                    (_a = actionProps.setCount) === null || _a === void 0 ? void 0 : _a.call(actionProps, (prev) => prev - 1);
                }
                else {
                    (_b = actionProps.setCount) === null || _b === void 0 ? void 0 : _b.call(actionProps, (prev) => prev + 1);
                }
            };
            return _jsx(InviteUserEventButton, { event: actionProps.scEvent, userId: userId, handleInvitations: _handleInvitations });
        }
        else if (tabValue === TabContentEnum.REQUESTS && actionProps) {
            const handleConfirm = (id) => {
                if (id) {
                    actionProps.setCount((prev) => prev - 1);
                    actionProps.setUsers((prev) => prev.filter((user) => user.id !== id));
                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.acceptRequestUserEventButton.snackbar.success", defaultMessage: "ui.acceptRequestUserEventButton.snackbar.success" }), {
                        variant: 'success',
                        autoHideDuration: 3000
                    });
                }
                else {
                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                        variant: 'error',
                        autoHideDuration: 3000
                    });
                }
            };
            return _jsx(AcceptRequestUserEventButton, { event: actionProps.scEvent, userId: userId, handleConfirm: handleConfirm });
        }
        return undefined;
    }, [tabValue, actionProps]);
    if (tabValue === TabContentEnum.PARTICIPANTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
        return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noParticipants", defaultMessage: "ui.eventMembersWidget.noParticipants" }) })));
    }
    else if (tabValue === TabContentEnum.INVITED && state.count === 0 && actionProps) {
        const date = actionProps.scEvent.end_date || actionProps.scEvent.start_date;
        const disabled = new Date(date).getTime() < new Date().getTime();
        const handleInvitations = (invited) => {
            if (invited) {
                handleRefresh === null || handleRefresh === void 0 ? void 0 : handleRefresh(tabValue);
            }
        };
        return (_jsx(EventInviteButton, { event: actionProps.scEvent, className: classes.eventButton, handleInvitations: handleInvitations, disabled: disabled }));
    }
    else if (tabValue === TabContentEnum.REQUESTS && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.count) === 0) {
        return (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noOtherRequests", defaultMessage: "ui.eventMembersWidget.noOtherRequests" }) })));
    }
    return (_jsxs(_Fragment, { children: [_jsx(List, { children: users === null || users === void 0 ? void 0 : users.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
}
