import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { LoadingButton } from '@mui/lab';
import { Box, Button, Checkbox, CircularProgress, FormControlLabel, Icon, Menu, MenuItem, SwipeableDrawer, useMediaQuery, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { getEventStatus, useSCContext, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
import { SCEventPrivacyType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
import { CacheStrategies, Logger } from '@selfcommunity/utils';
import classNames from 'classnames';
import PubSub from 'pubsub-js';
import { useEffect, useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { SCOPE_SC_UI } from '../../constants/Errors';
import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
const PREFIX = 'SCEventSubscribeButton';
const classes = {
    requestRoot: `${PREFIX}-request-root`,
    selectRoot: `${PREFIX}-select-root`,
    drawerRoot: `${PREFIX}-drawer-root`,
    menuRoot: `${PREFIX}-menu-root`,
    paper: `${PREFIX}-paper`,
    item: `${PREFIX}-item`,
    going: `${PREFIX}-going`,
    notGoing: `${PREFIX}-not-going`
};
const options = [
    {
        value: SCEventSubscriptionStatusType.GOING,
        label: _jsx(FormattedMessage, { id: "ui.eventSubscribeButton.going", defaultMessage: "ui.eventSubscribeButton.going" })
    },
    {
        value: SCEventSubscriptionStatusType.NOT_GOING,
        label: _jsx(FormattedMessage, { id: "ui.eventSubscribeButton.notGoing", defaultMessage: "ui.eventSubscribeButton.notGoing" })
    }
];
const RequestRoot = styled(LoadingButton, {
    name: PREFIX,
    slot: 'RequestRoot'
})(() => ({}));
const SelectRoot = styled(Button, {
    name: PREFIX,
    slot: 'SelectRoot'
})(() => ({}));
const SwipeableDrawerRoot = styled(SwipeableDrawer, {
    name: PREFIX,
    slot: 'DrawerRoot'
})(() => ({}));
const MenuRoot = styled(Menu, {
    name: PREFIX,
    slot: 'MenuRoot'
})(() => ({}));
/**
 * > API documentation for the Community-JS Event Subscribe Button component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {EventSubscribeButton} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCEventSubscribeButton` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCEventSubscribeButton-root|Styles applied to the root element.|

 * @param inProps
 */
export default function EventSubscribeButton(inProps) {
    var _a;
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { className, eventId, event, user, onSubscribe } = props, rest = __rest(props, ["className", "eventId", "event", "user", "onSubscribe"]);
    // STATE
    const [status, setStatus] = useState(undefined);
    const [loading, setLoading] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);
    const open = Boolean(anchorEl);
    // CONTEXT
    const scContext = useSCContext();
    const scUserContext = useSCUser();
    const scEventsManager = scUserContext.managers.events;
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    // CONST
    const authUserId = scUserContext.user ? scUserContext.user.id : null;
    const { scEvent } = useSCFetchEvent({
        id: eventId,
        event,
        cacheStrategy: authUserId ? CacheStrategies.CACHE_FIRST : CacheStrategies.STALE_WHILE_REVALIDATE
    });
    const isEventAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
    // HANDLERS
    const handleOpen = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    useEffect(() => {
        /**
         * Call scEventsManager.subscriptionStatus inside an effect
         * to avoid warning rendering child during update parent state
         */
        if (authUserId) {
            setStatus(scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(scEvent));
        }
    }, [authUserId, scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus, scEvent]);
    const toggleEventAttendance = (eventStatus) => {
        setLoading(true);
        const isGoing = eventStatus === SCEventSubscriptionStatusType.GOING ||
            !(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) ||
            (scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) === SCEventSubscriptionStatusType.INVITED;
        const toggleAction = isGoing
            ? scEventsManager.toggleEventAttendance(scEvent, (user === null || user === void 0 ? void 0 : user.id) || null)
            : scEventsManager.toggleEventNonattendance(scEvent);
        toggleAction
            .then(() => {
            onSubscribe === null || onSubscribe === void 0 ? void 0 : onSubscribe(scEvent, getEventStatus(scEvent, isGoing));
            setLoading(false);
            PubSub.publish(`${SCTopicType.EVENT}.${SCGroupEventType.ADD_MEMBER}`, scUserContext.user);
        })
            .catch((e) => {
            Logger.error(SCOPE_SC_UI, e);
        });
    };
    const handleToggleAction = (event) => {
        setAnchorEl(null);
        if (!scUserContext.user) {
            scContext.settings.handleAnonymousAction();
        }
        else if (status !== undefined) {
            toggleEventAttendance(event.target.value);
        }
    };
    function renderMenuItems() {
        return (_jsx(Box, { children: options.map((option) => (_jsx(MenuItem, Object.assign({ className: classes.item, disabled: loading }, { children: _jsx(FormControlLabel, { label: option.label, control: loading ? (_jsx(CircularProgress, { color: 'primary', size: 20 })) : (_jsx(Checkbox, { size: "small", checked: status === option.value, value: option.value, onChange: handleToggleAction, name: `${option.value}-option`, inputProps: { 'aria-label': `${option.label}` } })), labelPlacement: "start" }) }), option.value))) }));
    }
    /**
     * Get current translated status
     */
    const getStatus = useMemo(() => {
        let _status;
        switch (status) {
            case SCEventSubscriptionStatusType.REQUESTED:
                _status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.waitingApproval", id: "ui.eventSubscribeButton.waitingApproval" });
                break;
            case SCEventSubscriptionStatusType.GOING:
                _status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.going", id: "ui.eventSubscribeButton.going" });
                break;
            case SCEventSubscriptionStatusType.INVITED:
                _status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.accept", id: "ui.eventSubscribeButton.accept" });
                break;
            case SCEventSubscriptionStatusType.NOT_GOING:
                _status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.notGoing", id: "ui.eventSubscribeButton.notGoing" });
                break;
            default:
                (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC || status === SCEventSubscriptionStatusType.SUBSCRIBED
                    ? (_status = _jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.label", id: "ui.eventSubscribeButton.label" }))
                    : (_status = (_jsx(FormattedMessage, { defaultMessage: "ui.eventSubscribeButton.requestParticipation", id: "ui.eventSubscribeButton.requestParticipation" })));
                break;
        }
        return _status;
    }, [status, scEvent]);
    if (!scEvent || (isEventAdmin && (user === null || user === void 0 ? void 0 : user.id) === scUserContext.user.id) || (isEventAdmin && !(user === null || user === void 0 ? void 0 : user.id))) {
        return null;
    }
    return (_jsx(_Fragment, { children: (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PRIVATE && (!status || status === SCEventSubscriptionStatusType.REQUESTED) ? (_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, onClick: handleToggleAction }, rest, { children: getStatus }))) : (_jsxs(_Fragment, { children: [_jsx(SelectRoot, Object.assign({ className: classNames(classes.selectRoot, className, { [classes.going]: status && status === SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: _jsx(Icon, { children: open ? 'expand_less' : 'expand_more' }), startIcon: status &&
                        status !== SCEventSubscriptionStatusType.SUBSCRIBED && (_jsx(Icon, { children: status === SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() })))] })) }));
}
