"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const styles_1 = require("@mui/material/styles");
const system_1 = require("@mui/system");
const react_core_1 = require("@selfcommunity/react-core");
const types_1 = require("@selfcommunity/types");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const react_intl_1 = require("react-intl");
const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
const EventActionsMenu_1 = tslib_1.__importDefault(require("../../shared/EventActionsMenu"));
const events_1 = require("../../utils/events");
const EditEventButton_1 = tslib_1.__importDefault(require("../EditEventButton"));
const EventInviteButton_1 = tslib_1.__importDefault(require("../EventInviteButton"));
const EventSubscribeButton_1 = tslib_1.__importDefault(require("../EventSubscribeButton"));
const User_1 = tslib_1.__importDefault(require("../User"));
const constants_1 = require("./constants");
const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
const classes = {
    root: `${constants_1.PREFIX}-root`,
    cover: `${constants_1.PREFIX}-cover`,
    time: `${constants_1.PREFIX}-time`,
    calendar: `${constants_1.PREFIX}-calendar`,
    inProgress: `${constants_1.PREFIX}-in-progress`,
    chip: `${constants_1.PREFIX}-chip`,
    chipIcon: `${constants_1.PREFIX}-chip-icon`,
    info: `${constants_1.PREFIX}-info`,
    name: `${constants_1.PREFIX}-name`,
    visibility: `${constants_1.PREFIX}-visibility`,
    visibilityItem: `${constants_1.PREFIX}-visibility-item`,
    planner: `${constants_1.PREFIX}-planner`,
    multiActions: `${constants_1.PREFIX}-multi-actions`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.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
 */
function EventHeader(inProps) {
    // PROPS
    const props = (0, system_1.useThemeProps)({
        props: inProps,
        name: constants_1.PREFIX
    });
    const { id = null, className = null, event, eventId = null, EventSubscribeButtonProps = {}, EventActionsProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "event", "eventId", "EventSubscribeButtonProps", "EventActionsProps"]);
    // PREFERENCES
    const scPreferences = (0, react_core_1.useSCPreferences)();
    // CONTEXT
    const scUserContext = (0, react_core_1.useSCUser)();
    // HOOKS
    const { scEvent, setSCEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
    const theme = (0, material_1.useTheme)();
    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
    // INTL
    const intl = (0, react_intl_1.useIntl)();
    // CONST
    const isEventAdmin = (0, react_1.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 = (0, react_1.useMemo)(() => (0, events_1.checkEventFinished)(scEvent), [scEvent]);
    /**
     * Handles callback subscribe/unsubscribe event
     */
    const handleSubscribe = (event) => {
        setSCEvent(event);
    };
    // RENDER
    if (!scEvent) {
        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
    }
    const _backgroundCover = Object.assign({}, (scEvent.image_bigger
        ? { background: `url('${scEvent.image_bigger}') center / cover` }
        : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    (0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className), isEventAdmin: isEventAdmin, isEventFinished: isEventFinished }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.calendar }, { children: (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [scEvent.running && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.inProgress }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.inProgress", defaultMessage: "ui.eventHeader.inProgress" }) }))), isEventFinished && ((0, jsx_runtime_1.jsx)(material_1.Chip, { icon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "small", className: classes.chipIcon }, { children: "calendar_off" })), label: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.finished", defaultMessage: "ui.eventHeader.finished" }) })), variant: "outlined", size: "medium", color: "secondary", className: classes.chip })), (0, jsx_runtime_1.jsx)(material_1.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() ? ((0, jsx_runtime_1.jsx)(react_intl_1.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' })
                            } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.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' })
                            } }))) : ((0, jsx_runtime_1.jsx)(react_intl_1.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' })
                            } })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scEvent.name })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.public", defaultMessage: "ui.eventHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.visibility.private", defaultMessage: "ui.eventHeader.visibility.private" })] }))) }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: scEvent.location === types_1.SCEventLocationType.PERSON ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.live", defaultMessage: "ui.eventHeader.location.live" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.location.online", defaultMessage: "ui.eventHeader.location.online" })) }))] })), (0, jsx_runtime_1.jsx)(User_1.default, { className: classes.planner, userId: scEvent.managed_by.id, secondary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventHeader.user.manager", defaultMessage: "ui.eventHeader.user.manager" }), elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isEventAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EventInviteButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, disabled: isEventFinished }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(EditEventButton_1.default, { size: isMobile ? 'small' : 'medium', event: scEvent, onEditSuccess: setSCEvent, disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: (data) => setSCEvent(data) }, EventActionsProps))] })] }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EventSubscribeButton_1.default, Object.assign({ event: scEvent, onSubscribe: handleSubscribe }, EventSubscribeButtonProps, { disabled: isEventFinished })), (0, jsx_runtime_1.jsx)(EventActionsMenu_1.default, Object.assign({ event: scEvent, onEditSuccess: setSCEvent }, EventActionsProps))] })) }) })] }))] })));
}
exports.default = EventHeader;
