import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Chip, Icon, Paper, Typography, useMediaQuery, useTheme } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useThemeProps } from '@mui/system';
import { SCPreferences, useSCFetchEvent, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
import { SCEventLocationType, SCEventPrivacyType } from '@selfcommunity/types';
import classNames from 'classnames';
import { useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import Bullet from '../../shared/Bullet';
import Calendar from '../../shared/Calendar';
import EventActionsMenu from '../../shared/EventActionsMenu';
import { checkEventFinished } from '../../utils/events';
import EditEventButton from '../EditEventButton';
import EventInviteButton from '../EventInviteButton';
import EventSubscribeButton from '../EventSubscribeButton';
import User from '../User';
import { PREFIX } from './constants';
import EventHeaderSkeleton from './Skeleton';
const classes = {
    root: `${PREFIX}-root`,
    cover: `${PREFIX}-cover`,
    time: `${PREFIX}-time`,
    calendar: `${PREFIX}-calendar`,
    inProgress: `${PREFIX}-in-progress`,
    chip: `${PREFIX}-chip`,
    chipIcon: `${PREFIX}-chip-icon`,
    info: `${PREFIX}-info`,
    name: `${PREFIX}-name`,
    visibility: `${PREFIX}-visibility`,
    visibilityItem: `${PREFIX}-visibility-item`,
    planner: `${PREFIX}-planner`,
    multiActions: `${PREFIX}-multi-actions`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    shouldForwardProp: (prop) => prop !== 'isEventAdmin' && prop !== 'isEventFinished'
})(() => ({}));
/**
 * > API documentation for the Community-JS Event Header component. Learn about the available props and the CSS API.
 *
 *
 * This component renders the events top section.

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCEventHeader-root|Styles applied to the root element.|
 |cover|.SCEventHeader-cover|Styles applied to the cover element.|
 |time|.SCEventHeader-time|Styles applied to the time element.|
 |calendar|.SCEventHeader-calendar|Styles applied to the calendar element.|
 |info|SCEventHeader-info|Styles applied to the info section.|
 |name|SCEventHeader-username|Styles applied to the username element.|
 |visibility|SCEventHeader-visibility|Styles applied to the visibility section.|
 |visibilityItem|SCEventHeader-visibility-item|Styles applied to the visibility element.|
 |multiActions|SCEventHeader-multi-action|Styles applied to the multi actions section.|

 * @param inProps
 */
export default function EventHeader(inProps) {
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { id = null, className = null, event, eventId = null, EventSubscribeButtonProps = {}, EventActionsProps = {} } = props, rest = __rest(props, ["id", "className", "event", "eventId", "EventSubscribeButtonProps", "EventActionsProps"]);
    // PREFERENCES
    const scPreferences = useSCPreferences();
    // CONTEXT
    const scUserContext = useSCUser();
    // HOOKS
    const { scEvent, setSCEvent } = useSCFetchEvent({ id: eventId, event });
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    // INTL
    const intl = useIntl();
    // CONST
    const isEventAdmin = useMemo(() => scUserContext.user && scEvent && (scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by.id) === scUserContext.user.id, [scUserContext.user, scEvent === null || scEvent === void 0 ? void 0 : scEvent.managed_by]);
    const isEventFinished = useMemo(() => checkEventFinished(scEvent), [scEvent]);
    /**
     * Handles callback subscribe/unsubscribe event
     */
    const handleSubscribe = (event) => {
        setSCEvent(event);
    };
    // RENDER
    if (!scEvent) {
        return _jsx(EventHeaderSkeleton, {});
    }
    const _backgroundCover = Object.assign({}, (scEvent.image_bigger
        ? { background: `url('${scEvent.image_bigger}') center / cover` }
        : { background: `url('${scPreferences.preferences[SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    _jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [_jsx(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: _jsx(Box, Object.assign({ className: classes.calendar }, { children: _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() }) })) })), _jsxs(Box, Object.assign({ className: classes.info }, { children: [scEvent.running && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && (_jsx(Chip, { icon: _jsx(Icon, Object.assign({ fontSize: "small", className: classes.chipIcon }, { children: "calendar_off" })), label: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "outlined", size: "medium", color: "secondary", className: classes.chip })), _jsx(Typography, Object.assign({ className: classes.time }, { children: scEvent.end_date && scEvent.end_date !== scEvent.start_date ? (new Date(scEvent.start_date).getDate() !== new Date(scEvent.end_date).getDate() ? (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTimeDiff", defaultMessage: "ui.eventHeader.startEndTimeDiff", values: {
                                startDate: intl.formatDate(scEvent.start_date, {
                                    weekday: 'long',
                                    day: 'numeric',
                                    year: 'numeric',
                                    month: 'long'
                                }),
                                endDate: intl.formatDate(scEvent.end_date, {
                                    weekday: 'long',
                                    day: 'numeric',
                                    year: 'numeric',
                                    month: 'long'
                                }),
                                startTime: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' }),
                                endTime: intl.formatDate(scEvent.end_date, { hour: 'numeric', minute: 'numeric' })
                            } })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.startEndTime", defaultMessage: "ui.eventHeader.startEndTime", values: {
                                date: intl.formatDate(scEvent.start_date, {
                                    weekday: 'long',
                                    day: 'numeric',
                                    year: 'numeric',
                                    month: 'long'
                                }),
                                start: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' }),
                                end: intl.formatDate(scEvent.end_date, { hour: 'numeric', minute: 'numeric' })
                            } }))) : (_jsx(FormattedMessage, { id: "ui.eventHeader.dateTime", defaultMessage: "ui.eventHeader.dateTime", values: {
                                date: intl.formatDate(scEvent.start_date, {
                                    weekday: 'long',
                                    day: 'numeric',
                                    year: 'numeric',
                                    month: 'long'
                                }),
                                hour: intl.formatDate(scEvent.start_date, { hour: 'numeric', minute: 'numeric' })
                            } })) })), _jsx(Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), _jsxs(Box, Object.assign({ className: classes.visibility }, { children: [_jsx(_Fragment, { children: scEvent.privacy === SCEventPrivacyType.PUBLIC ? (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : (_jsxs(Typography, Object.assign({ className: classes.visibilityItem }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), _jsx(Bullet, {}), _jsx(Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === SCEventLocationType.PERSON ? (_jsx(FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : (_jsx(FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), _jsx(User, { className: classes.planner, userId: scEvent.managed_by.id, secondary: _jsx(FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: _jsx(_Fragment, { children: isEventAdmin ? (_jsxs(Box, Object.assign({ className: classes.multiActions }, { children: [_jsx(EventInviteButton, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), _jsxs(Box, { children: [!isMobile && (_jsx(EditEventButton, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : (_jsxs(_Fragment, { children: [_jsx(EventSubscribeButton, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), _jsx(EventActionsMenu, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
}
