"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styles_1 = require("@mui/material/styles");
const react_lazyload_1 = tslib_1.__importDefault(require("react-lazyload"));
const Media_1 = require("../../../constants/Media");
const AutoPlayer_1 = tslib_1.__importDefault(require("../../AutoPlayer"));
const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
const LazyLoad_1 = require("../../../constants/LazyLoad");
const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const constants_1 = require("./constants");
const material_1 = require("@mui/material");
const filter_1 = tslib_1.__importDefault(require("./filter"));
const classes = {
    displayRoot: `${constants_1.PREFIX}-display-root`,
    displayLink: `${constants_1.PREFIX}-link`,
    displayHtmlWrap: `${constants_1.PREFIX}-html-wrap`,
    displayHtml: `${constants_1.PREFIX}-html`,
    displayHtmlPlaceholder: `${constants_1.PREFIX}-html-placeholder`,
    displayHtmlLoading: `${constants_1.PREFIX}-html-loading`,
    displayVideo: `${constants_1.PREFIX}-video`,
    thumbnail: `${constants_1.PREFIX}-thumbnail`,
    thumbnailFullWidth: `${constants_1.PREFIX}-thumbnail`,
    image: `${constants_1.PREFIX}-image`,
    snippet: `${constants_1.PREFIX}-snippet`,
    snippetTitle: `${constants_1.PREFIX}-snippet-title`,
    snippetDescription: `${constants_1.PREFIX}-snippet-description`
};
const Root = (0, styles_1.styled)(Box_1.default, {
    name: constants_1.PREFIX,
    slot: 'DisplayRoot'
})(({ theme }) => ({}));
exports.default = (props) => {
    // PROPS
    const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = tslib_1.__rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
    // HANDLERS
    const handleLinkClick = (link) => {
        onMediaClick && onMediaClick(link);
    };
    // MEMO
    const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [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 ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayLink }, { children: [media.embed.metadata.images && media.embed.metadata.images.length > 0 && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: fullWidth ? ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnailFullWidth, classes.image), style: { background: `url(${media.image})`, paddingBottom: `${100 / media.image_width / media.image_height}%` } })) : ((0, jsx_runtime_1.jsx)(Box_1.default, { className: (0, classnames_1.default)(classes.thumbnail, classes.image), style: { background: `url(${media.image})` } })) })), (0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.snippet }, { children: [(0, jsx_runtime_1.jsx)("b", Object.assign({ className: classes.snippetTitle }, { children: media.embed.metadata.title })), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: classes.snippetDescription }, { children: media.embed.metadata.description })), (0, jsx_runtime_1.jsx)("a", Object.assign({ href: media.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(media) }, { children: domain }))] })), (0, jsx_runtime_1.jsx)("div", { style: { clear: 'both' } })] }), key));
    };
    /**
     * Render html embed
     * @param media
     * @param key
     */
    const renderHtml = (media, key) => {
        return ((0, jsx_runtime_1.jsxs)(Box_1.default, Object.assign({ className: classes.displayHtmlWrap }, { children: [(0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: media.embed.metadata.html }, className: classes.displayHtml }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.displayHtmlPlaceholder, style: { paddingTop: `${(100 * media.embed.metadata.height) / media.embed.metadata.width}%`, maxHeight: media.embed.metadata.height } }, { children: (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, className: classes.displayHtmlLoading }) }))] }), key));
    };
    /**
     * Renders component
     */
    if (_medias.length === 0) {
        return null;
    }
    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.displayRoot) }, rest, { children: _medias.map((l, i) => {
            if (l.embed.metadata && l.embed.metadata.type === Media_1.MEDIA_TYPE_VIDEO) {
                return ((0, jsx_runtime_1.jsx)(react_lazyload_1.default, Object.assign({ className: classes.displayVideo, placeholder: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", height: 360, width: '100%' }), once: true, offset: LazyLoad_1.DEFAULT_PRELOAD_OFFSET_VIEWPORT }, { children: (0, jsx_runtime_1.jsx)(AutoPlayer_1.default, { url: l.url, width: '100%', onVideoWatch: () => handleLinkClick(l) }, i) }), i));
            }
            return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: renderPreview(l, i) }, i);
        }) })));
};
