import { __rest } from "tslib";
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import FeedObject from '../../../components/FeedObject';
import { SCFeedObjectTemplateType } from '../../../types/feedObject';
import { CacheStrategies } from '@selfcommunity/utils';
import classNames from 'classnames';
import filter from './filter';
import { PREFIX } from './constants';
import { MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_TYPE_EVENT } from '../../../constants/Media';
import { SCEventTemplateType } from '../../../types/event';
import Event from '../../../components/Event';
const classes = {
    displayRoot: `${PREFIX}-display-root`,
    sharePreview: `${PREFIX}-share-preview`,
    sharePlaceholder: `${PREFIX}-share-placeholder`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'DisplayRoot'
})(({ theme }) => ({}));
export default (_a) => {
    var { className, medias = [], onMediaClick = null } = _a, rest = __rest(_a, ["className", "medias", "onMediaClick"]);
    // MEMO
    const _medias = useMemo(() => medias.filter(filter), [medias]);
    if (_medias.length === 0) {
        return null;
    }
    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((media, i) => (_jsx(Box, Object.assign({ className: classes.sharePreview, onClick: onMediaClick }, { children: media.type === MEDIA_TYPE_EVENT || (media.embed && media.embed.embed_type === MEDIA_EMBED_SC_SHARED_EVENT) ? (_jsx(Event, { event: media.embed.metadata, template: SCEventTemplateType.DETAIL, variant: "outlined", square: true, hideEventParticipants: true, hideEventPlanner: true, actions: _jsx(_Fragment, {}) })) : (_jsx(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST })) }), i))) })));
};
