import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { TabContext, TabList, TabPanel } from '@mui/lab';
import { CardContent, Stack, Tab, Typography, useThemeProps } from '@mui/material';
import { styled } from '@mui/system';
import { EventService } from '@selfcommunity/api-services';
import { SCCache, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
import { Logger } from '@selfcommunity/utils';
import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import 'swiper/css';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
import Widget from '../Widget';
import { PREFIX } from './constants';
import Skeleton from './Skeleton';
import TabContentComponent from './TabContentComponent';
import { TabContentEnum } from './types';
const classes = {
    root: `${PREFIX}-root`,
    content: `${PREFIX}-content`,
    title: `${PREFIX}-title`,
    tabsWrapper: `${PREFIX}-tabs-wrapper`,
    tabLabelWrapper: `${PREFIX}-tab-label-wrapper`,
    tabPanel: `${PREFIX}-tab-panel`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
export default function EventMembersWidget(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { event, eventId, userProps = {}, endpointQueryParams = { limit: 5, offset: DEFAULT_PAGINATION_OFFSET }, cacheStrategy, dialogProps, limit = 5 } = props, rest = __rest(props, ["event", "eventId", "userProps", "endpointQueryParams", "cacheStrategy", "dialogProps", "limit"]);
    // STATE
    const [participants, dispatchParticipants] = useReducer(dataWidgetReducer, {
        isLoadingNext: false,
        next: null,
        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_PARTECIPANTS_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
        cacheStrategy,
        visibleItems: limit
    }, stateWidgetInitializer);
    const [invited, dispatchInvited] = useReducer(dataWidgetReducer, {
        isLoadingNext: false,
        next: null,
        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
        cacheStrategy,
        visibleItems: limit
    }, stateWidgetInitializer);
    const [requests, dispatchRequests] = useReducer(dataWidgetReducer, {
        isLoadingNext: false,
        next: null,
        cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_REQUESTS_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
        cacheStrategy,
        visibleItems: limit
    }, stateWidgetInitializer);
    const [participantsCount, setParticipantsCount] = useState(participants.count);
    const [invitedCount, setInvitedCount] = useState(invited.count);
    const [requestsCount, setRequestsCount] = useState(requests.count);
    const [requestsUsers, setRequestsUsers] = useState(requests.results);
    const [tabValue, setTabValue] = useState(TabContentEnum.PARTICIPANTS);
    const [refresh, setRefresh] = useState(null);
    // CONTEXT
    const scUserContext = useSCUser();
    // HOOKS
    const { scEvent } = useSCFetchEvent({ id: eventId, event });
    // CONSTS
    const hasAllow = useMemo(() => { var _a; return ((_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id) === (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id); }, [scUserContext, scEvent]);
    const title = useMemo(() => {
        switch (tabValue) {
            case TabContentEnum.REQUESTS:
                return 'ui.eventMembersWidget.requests';
            case TabContentEnum.INVITED:
                return 'ui.eventMembersWidget.invited';
            case TabContentEnum.PARTICIPANTS:
            default:
                return 'ui.eventMembersWidget.participants';
        }
    }, [tabValue]);
    // CALLBACKS
    const _initParticipants = useCallback(() => {
        if (!participants.initialized && !participants.isLoadingNext) {
            dispatchParticipants({ type: actionWidgetTypes.LOADING_NEXT });
            EventService.getUsersGoingToEvent(scEvent.id, Object.assign({}, endpointQueryParams))
                .then((payload) => {
                dispatchParticipants({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
                setParticipantsCount(payload.count);
            })
                .catch((error) => {
                dispatchParticipants({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
                Logger.error(SCOPE_SC_UI, error);
            });
        }
    }, [participants.isLoadingNext, participants.initialized, scEvent, dispatchParticipants, setParticipantsCount]);
    const _initInvited = useCallback(() => {
        if (!invited.initialized && !invited.isLoadingNext && hasAllow) {
            dispatchInvited({ type: actionWidgetTypes.LOADING_NEXT });
            EventService.getEventInvitedUsers(scEvent.id, Object.assign({}, endpointQueryParams))
                .then((payload) => {
                dispatchInvited({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
                setInvitedCount(payload.count);
            })
                .catch((error) => {
                dispatchInvited({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
                Logger.error(SCOPE_SC_UI, error);
            });
        }
    }, [invited.isLoadingNext, invited.initialized, scEvent, dispatchInvited, setInvitedCount]);
    const _initRequests = useCallback(() => {
        if (!requests.initialized && !requests.isLoadingNext && hasAllow) {
            dispatchRequests({ type: actionWidgetTypes.LOADING_NEXT });
            EventService.getEventWaitingApprovalSubscribers(scEvent.id, Object.assign({}, endpointQueryParams))
                .then((payload) => {
                dispatchRequests({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: Object.assign(Object.assign({}, payload), { initialized: true }) });
                setRequestsCount(payload.count);
                setRequestsUsers(payload.results);
            })
                .catch((error) => {
                dispatchRequests({ type: actionWidgetTypes.LOAD_NEXT_FAILURE, payload: { errorLoadNext: error } });
                Logger.error(SCOPE_SC_UI, error);
            });
        }
    }, [requests.isLoadingNext, requests.initialized, scEvent, dispatchRequests, setRequestsCount, setRequestsUsers]);
    // EFFECTS
    useEffect(() => {
        let _t;
        if (scUserContext.user && scEvent) {
            _t = setTimeout(() => {
                if (refresh === TabContentEnum.PARTICIPANTS) {
                    _initParticipants();
                    setRefresh(null);
                }
                else if (refresh === TabContentEnum.INVITED) {
                    _initInvited();
                    setRefresh(null);
                }
                else {
                    _initParticipants();
                    _initInvited();
                    _initRequests();
                }
            });
            return () => {
                clearTimeout(_t);
            };
        }
    }, [scUserContext.user, scEvent, refresh]);
    useEffect(() => {
        if (participants.initialized && scEvent && Boolean((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) {
            dispatchParticipants({ type: actionWidgetTypes.RESET, payload: {} });
            dispatchRequests({ type: actionWidgetTypes.RESET, payload: {} });
            dispatchInvited({ type: actionWidgetTypes.RESET, payload: {} });
        }
    }, [participants.initialized, scEvent, eventId, event]);
    // HANDLERS
    const handleTabChange = useCallback((_evt, newTabValue) => {
        setTabValue(newTabValue);
    }, []);
    const handleRefresh = useCallback((_tabValue) => {
        if (_tabValue === TabContentEnum.PARTICIPANTS) {
            dispatchParticipants({ type: actionWidgetTypes.RESET });
        }
        else if (_tabValue === TabContentEnum.INVITED) {
            dispatchInvited({ type: actionWidgetTypes.RESET });
        }
        setRefresh(_tabValue);
    }, []);
    if (!scEvent ||
        !participants.initialized ||
        (scEvent && ((eventId !== undefined && scEvent.id !== eventId) || (event && scEvent.id !== event.id))) ||
        (tabValue === TabContentEnum.PARTICIPANTS && participants.isLoadingNext && !participants.initialized)) {
        return _jsx(Skeleton, {});
    }
    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: title, defaultMessage: title }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participantsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: TabContentEnum.PARTICIPANTS }), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: TabContentEnum.INVITED })), hasAllow && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: requestsCount })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.requests", defaultMessage: "ui.eventMembersWidget.requests" }) }))] })), value: TabContentEnum.REQUESTS }))] })), _jsx(TabPanel, Object.assign({ value: TabContentEnum.PARTICIPANTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.PARTICIPANTS, state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps, handleRefresh: handleRefresh }) })), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentEnum.INVITED, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.INVITED, state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                    scEvent,
                                    setCount: setInvitedCount
                                }, handleRefresh: handleRefresh }) }))), hasAllow && (_jsx(TabPanel, Object.assign({ value: TabContentEnum.REQUESTS, className: classes.tabPanel }, { children: _jsx(TabContentComponent, { tabValue: TabContentEnum.REQUESTS, state: requests, dispatch: dispatchRequests, userProps: userProps, dialogProps: dialogProps, actionProps: {
                                    scEvent,
                                    count: requestsCount,
                                    setCount: setRequestsCount,
                                    users: requestsUsers,
                                    setUsers: setRequestsUsers
                                }, handleRefresh: handleRefresh }) })))] }))] })) })));
}
