"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 Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
const styles_1 = require("@mui/material/styles");
const react_core_1 = require("@selfcommunity/react-core");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const Media_1 = require("../../../constants/Media");
const react_1 = tslib_1.__importStar(require("react"));
const react_intersection_observer_1 = require("react-intersection-observer");
const Lightbox_1 = require("../../Lightbox");
const constants_1 = require("./constants");
const filter_1 = tslib_1.__importDefault(require("./filter"));
const classes = {
    displayRoot: `${constants_1.PREFIX}-display-root`,
    background: `${constants_1.PREFIX}-background`,
    backgroundPortrait: `${constants_1.PREFIX}-background-portrait`,
    heightOne: `${constants_1.PREFIX}-height-one`,
    heightHalfOne: `${constants_1.PREFIX}-height-half-one`,
    heightTwo: `${constants_1.PREFIX}-height-two`,
    heightThree: `${constants_1.PREFIX}-height-three`,
    cover: `${constants_1.PREFIX}-cover`,
    coverText: `${constants_1.PREFIX}-cover-text`,
    slide: `${constants_1.PREFIX}-slide`,
    border: `${constants_1.PREFIX}-border`,
    gallery: `${constants_1.PREFIX}-gallery`,
    title: `${constants_1.PREFIX}-title`,
    iconFile: `${constants_1.PREFIX}-icon-file`
};
const Root = (0, styles_1.styled)(material_1.Box, {
    name: constants_1.PREFIX,
    slot: 'DisplayRoot'
})(({}) => ({}));
exports.default = (props) => {
    // PROPS
    const { className = '', medias = [], maxVisible = 5, gallery = true, onMediaClick = null } = props;
    // STATE
    const [preview, setPreview] = (0, react_1.useState)(-1);
    const [toolbarButtons, setToolbarButtons] = (0, react_1.useState)(undefined);
    const { ref, inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
    // MEMO
    const _medias = (0, react_1.useMemo)(() => medias.filter(filter_1.default), [medias]);
    // HANDLERS
    const handleClose = () => {
        setPreview(-1);
        setToolbarButtons(undefined);
    };
    // UTILS
    const getImageUrl = (image, original = false) => {
        if (typeof image === 'object') {
            const _image = image.image_thumbnail ? image.image_thumbnail.url : image.image ? image.image : '/static/frontend_v2/images/image.svg';
            return original && image.image ? image.image : _image;
        }
        return image;
    };
    const openPreviewImage = (0, react_1.useCallback)((index) => {
        if (gallery === false) {
            // Prevent gallery
            return;
        }
        setPreview(index);
        onMediaClick(_medias[index]);
    }, [_medias]);
    // RENDERING
    const renderTitle = (o) => {
        if (!o) {
            return null;
        }
        let startAdornment = null;
        if (o.type) {
            switch (o.type) {
                case 'doc':
                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "picture_as_pdf" }));
                    break;
                default:
                    startAdornment = (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: classes.iconFile }, { children: "insert_drive_file" }));
                    break;
            }
        }
        return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: o.title && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: [startAdornment, " ", o.title] })) }))) }));
    };
    const renderOne = () => {
        const overlay = _medias.length > maxVisible && maxVisible == 1 ? renderCountOverlay(true) : renderOverlay(0);
        const isGif = _medias[0].image_mimetype ? _medias[0].image_mimetype.includes('image/gif') : false;
        const isLandscape = _medias[0].image_height < _medias[0].image_width;
        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, style: Object.assign({}, (_medias[0].image_thumbnail && _medias[0].image_thumbnail.color ? { backgroundColor: _medias[0].image_thumbnail.color } : {})) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, ref: ref, xs: 12, classes: {
                    root: (0, classnames_1.default)(classes.border, classes.heightOne, Object.assign(Object.assign({}, (isGif || isLandscape ? { [classes.background]: true } : { [classes.backgroundPortrait]: true })), { [classes.gallery]: gallery, [classes.heightHalfOne]: _medias.length > 1 }))
                }, onClick: () => openPreviewImage(0), style: Object.assign({ background: `url(${getImageUrl(_medias[0], inView && isGif)})` }, (isLandscape ? { paddingTop: `${(100 * _medias[0].image_height) / _medias[0].image_width}%` } : {})) }, { children: [overlay, renderTitle(_medias[0])] })) })));
    };
    const renderTwo = () => {
        const overlay = _medias.length > maxVisible && [2, 3].includes(+maxVisible) ? renderCountOverlay(true) : renderOverlay(1);
        const conditionalRender = [3, 4].includes(_medias.length) || (_medias.length > +maxVisible && [3, 4].includes(+maxVisible));
        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 0), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[0])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 0), renderTitle(_medias[0])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 6, classes: { root: (0, classnames_1.default)(classes.border, classes.heightTwo, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 1), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[1])})` } }, { children: [overlay, renderTitle(_medias[1])] }))] })));
    };
    const renderThree = () => {
        const conditionalRender = _medias.length == 4 || (_medias.length > +maxVisible && +maxVisible == 4);
        const overlay = !maxVisible || maxVisible > 5 || (_medias.length > maxVisible && [4, 5].includes(+maxVisible))
            ? renderCountOverlay(true)
            : renderOverlay(conditionalRender ? 3 : 4);
        return ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 1 : 2), style: { background: `url(${getImageUrl(conditionalRender ? _medias[1] : _medias[2])})` } }, { children: [renderOverlay(conditionalRender ? 1 : 2), renderTitle(_medias[1])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 2 : 3), style: { background: `url(${getImageUrl(conditionalRender ? _medias[2] : _medias[3])})` } }, { children: [renderOverlay(conditionalRender ? 2 : 3), renderTitle(_medias[2])] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 4, md: 4, classes: { root: (0, classnames_1.default)(classes.border, classes.heightThree, classes.background, { [classes.gallery]: gallery }) }, onClick: () => openPreviewImage(conditionalRender ? 3 : 4), style: { background: `url(${getImageUrl(conditionalRender ? _medias[3] : _medias[4])})` } }, { children: [overlay, renderTitle(_medias[3])] }))] })));
    };
    const renderOverlay = (id) => {
        if (!gallery) {
            return null;
        }
        return [
            (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(classes.cover, classes.slide) }, `cover-${id}`),
            (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(classes.coverText, classes.slide, 'animate-text'), style: { fontSize: '100%' } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "zoom_out_map" }) }), `cover-text-${id}`)
        ];
    };
    const renderCountOverlay = (more) => {
        const extra = _medias.length - (maxVisible && maxVisible > 5 ? 5 : maxVisible);
        return [
            more && (0, jsx_runtime_1.jsx)("div", { className: classes.cover }, "count"),
            more && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.coverText, style: { fontSize: '200%' } }, { children: (0, jsx_runtime_1.jsxs)("p", { children: ["+", extra] }) }), "count-sub"))
        ];
    };
    const handleIndexChange = (0, react_1.useCallback)((index) => {
        if (_medias[index].type === Media_1.MEDIA_TYPE_DOCUMENT) {
            setToolbarButtons((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: medias[index].url, target: "_blank", color: "inherit" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "download" }) })));
        }
        else {
            setToolbarButtons(undefined);
        }
    }, [_medias, setToolbarButtons]);
    (0, react_1.useEffect)(() => {
        if (preview !== -1) {
            handleIndexChange(preview);
        }
    }, [preview]);
    const imagesToShow = [..._medias];
    if (maxVisible && _medias.length > maxVisible) {
        imagesToShow.length = maxVisible;
    }
    if (_medias.length === 0) {
        return null;
    }
    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.displayRoot, className) }, { children: [[1, 3, 4].includes(imagesToShow.length) && renderOne(), imagesToShow.length >= 2 && imagesToShow.length != 4 && renderTwo(), imagesToShow.length >= 4 && renderThree(), preview !== -1 && ((0, jsx_runtime_1.jsx)(Lightbox_1.Lightbox, { onClose: handleClose, index: preview, medias: _medias, toolbarButtons: toolbarButtons, onIndexChange: handleIndexChange }))] })));
};
