import { __rest } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useMemo } from 'react';
import { styled } from '@mui/material/styles';
import LazyLoad from 'react-lazyload';
import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
import AutoPlayer from '../../AutoPlayer';
import Box from '@mui/material/Box';
import { DEFAULT_PRELOAD_OFFSET_VIEWPORT } from '../../../constants/LazyLoad';
import Skeleton from '@mui/material/Skeleton';
import classNames from 'classnames';
import { PREFIX } from './constants';
import { CircularProgress } from '@mui/material';
import filter from './filter';
const classes = {
    displayRoot: `${PREFIX}-display-root`,
    displayLink: `${PREFIX}-link`,
    displayHtmlWrap: `${PREFIX}-html-wrap`,
    displayHtml: `${PREFIX}-html`,
    displayHtmlPlaceholder: `${PREFIX}-html-placeholder`,
    displayHtmlLoading: `${PREFIX}-html-loading`,
    displayVideo: `${PREFIX}-video`,
    thumbnail: `${PREFIX}-thumbnail`,
    thumbnailFullWidth: `${PREFIX}-thumbnail`,
    image: `${PREFIX}-image`,
    snippet: `${PREFIX}-snippet`,
    snippetTitle: `${PREFIX}-snippet-title`,
    snippetDescription: `${PREFIX}-snippet-description`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'DisplayRoot'
})(({ theme }) => ({}));
export default (props) => {
    // PROPS
    const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = __rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
    // HANDLERS
    const handleLinkClick = (link) => {
        onMediaClick && onMediaClick(link);
    };
    // MEMO
    const _medias = useMemo(() => medias.filter(filter), [medias]);
    // RENDER
    /**
     * Renders link display
     * @param media
     * @param key
     */
    const renderPreview = (media, key) => {
        // if (media.embed.metadata.html) {
        // 	return renderHtml(media, key);
        // }
        const domain = new URL(media.embed.metadata.url).hostname.replace('www.', '');
        return (_jsxs(Box, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && (_jsx(_Fragment, { children: fullWidth ? (_jsx(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : (_jsx(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), _jsxs(Box, Object.assign({ className: classes.snippet }, { children: [_jsx("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), _jsx("br", {}), _jsx("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), _jsx("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), _jsx("div", { style: { clear: 'both' } })] }), key));
    };
    /**
     * Render html embed
     * @param media
     * @param key
     */
    const renderHtml = (media, key) => {
        return (_jsxs(Box, Object.assign({ className: classes.displayHtmlWrap }, { children: [_jsx("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), _jsx("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: _jsx(CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
    };
    /**
     * Renders component
     */
    if (_medias.length === 0) {
        return null;
    }
    return (_jsx(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
            if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
                return (_jsx(LazyLoad, Object.assign({ className: classes.displayVideo, placeholder: _jsx(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT }, { children: _jsx(AutoPlayer, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }), i));
            }
            return _jsx(React.Fragment, { children: renderPreview(l, i) }, i);
        }) })));
};
