import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, CardActions, CardContent, CardMedia, Divider, Icon, styled, Typography, useThemeProps } from '@mui/material';
import { SCPreferences, SCUserContext, useSCPreferences } from '@selfcommunity/react-core';
import { useContext, useEffect, useMemo, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
import CreateEventButton from '../CreateEventButton';
import Widget from '../Widget';
import { PREFIX } from './constants';
import Skeleton from './Skeleton';
import { SCFeatureName } from '@selfcommunity/types';
const classes = {
    root: `${PREFIX}-root`,
    image: `${PREFIX}-image`,
    calendar: `${PREFIX}-calendar`,
    content: `${PREFIX}-content`,
    title: `${PREFIX}-title`,
    spaging: `${PREFIX}-spacing`,
    actions: `${PREFIX}-actions`
};
const Root = styled(Widget, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (_props, styles) => styles.root
})(() => ({}));
export default function CreateEventWidget(inProps) {
    var _a;
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { CreateEventButtonComponentProps = {} } = props, rest = __rest(props, ["CreateEventButtonComponentProps"]);
    // STATE
    const [loading, setLoading] = useState(true);
    // CONTEXT
    const scUserContext = useContext(SCUserContext);
    // HOOK
    const { preferences, features } = useSCPreferences();
    const eventsEnabled = useMemo(() => preferences &&
        features &&
        features.includes(SCFeatureName.TAGGING) &&
        SCPreferences.CONFIGURATIONS_EVENTS_ENABLED in preferences &&
        preferences[SCPreferences.CONFIGURATIONS_EVENTS_ENABLED].value, [preferences, features]);
    const authUserId = scUserContext.user ? scUserContext.user.id : null;
    const onlyStaffEnabled = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_GROUPS_ONLY_STAFF_ENABLED].value, [preferences]);
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    const canCreateEvent = useMemo(() => { var _a, _b; return (_b = (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission) === null || _b === void 0 ? void 0 : _b.create_group; }, [(_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.permission]);
    useEffect(() => {
        setLoading(false);
    }, []);
    if (loading) {
        return _jsx(Skeleton, {});
    }
    /**
     * If there's no authUserId, component is hidden.
     */
    if (!eventsEnabled || (!canCreateEvent && onlyStaffEnabled) || !authUserId) {
        return _jsx(HiddenPlaceholder, {});
    }
    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(CardMedia, { component: "img", image: `${preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}`, alt: "placeholder image", className: classes.image }), _jsx(Icon, Object.assign({ className: classes.calendar, fontSize: "large" }, { children: "CalendarIcon" }))] })), _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.title", defaultMessage: "ui.createEvent.title" }) })), _jsx(Typography, Object.assign({ variant: "body1", className: classes.spaging }, { children: _jsx(FormattedMessage, { id: "ui.createEvent.description", defaultMessage: "ui.createEvent.description" }) })), _jsx(Divider, { className: classes.spaging })] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(CreateEventButton, Object.assign({}, CreateEventButtonComponentProps)) }))] })));
}
