import { __awaiter, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useContext, useState } from 'react';
import { styled } from '@mui/material/styles';
import { ListItem, Typography, IconButton, Box, useTheme, Button } from '@mui/material';
import PrivateMessageThreadItemSkeleton from './Skeleton';
import { useIntl } from 'react-intl';
import { SCMessageFileType, SCPrivateMessageStatusType } from '@selfcommunity/types';
import Icon from '@mui/material/Icon';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { SCUserContext } from '@selfcommunity/react-core';
import useMediaQuery from '@mui/material/useMediaQuery';
import PrivateMessageSettingsIconButton from '../PrivateMessageSettingsIconButton';
import { bytesToSize } from '../../utils/sizeCoverter';
import BaseDialog from '../../shared/BaseDialog';
import LightBox from '../../shared/Lightbox';
import AutoPlayer from '../../shared/AutoPlayer';
import { useSnackbar } from 'notistack';
import { PREFIX } from './constants';
import { isSupportedVideoFormat } from '../../utils/thumbnailCoverter';
const classes = {
    root: `${PREFIX}-root`,
    username: `${PREFIX}-username`,
    text: `${PREFIX}-text`,
    img: `${PREFIX}-img`,
    document: `${PREFIX}-document`,
    video: `${PREFIX}-video`,
    other: `${PREFIX}-other`,
    iconButton: `${PREFIX}-icon-button`,
    messageTime: `${PREFIX}-message-time`,
    menuItem: `${PREFIX}-menu-item`,
    downloadButton: `${PREFIX}-download-button`,
    dialogRoot: `${PREFIX}-dialog-root`
};
const DialogRoot = styled(BaseDialog, {
    name: PREFIX,
    slot: 'DialogRoot'
})(() => ({}));
const Root = styled(ListItem, {
    name: PREFIX,
    slot: 'Root'
})(() => ({}));
/**
 * > API documentation for the Community-JS PrivateMessageItem component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {PrivateMessageThreadItem} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCPrivateMessageThreadItem` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCPrivateMessageThreadItem-root|Styles applied to the root element.|
 |text|.SCPrivateMessageThreadItem-text|Styles applied to the message text element.|
 |img|.SCPrivateMessageThreadItem-img|Styles applied to the img element.|
 |document|.SCPrivateMessageThreadItem-document|Styles applied to the message file element.|
 |video|.SCPrivateMessageThreadItem-video|Styles applied to the message video element.|
 |other|.SCPrivateMessageThreadItem-other|Styles applied to other media type element.|
 |messageTime|.SCPrivateMessageThreadItem-message-time|Styles applied to the thread message time element.|
 |menuItem|.SCPrivateMessageThreadItem-menu-item|Styles applied to the thread message menu item element.|
 |dialogRoot|.SCPrivateMessageThreadItem-dialog-root|Styles applied to dialog root element.|


 * @param inProps
 */
export default function PrivateMessageThreadItem(inProps) {
    var _a;
    // PROPS
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    const { message = null, className = null, mouseEvents = {}, isHovering = null, showMenuIcon = false, onMenuIconClick = null } = props, rest = __rest(props, ["message", "className", "mouseEvents", "isHovering", "showMenuIcon", "onMenuIconClick"]);
    // INTL
    const intl = useIntl();
    // CONTEXT
    const scUserContext = useContext(SCUserContext);
    // STATE
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
    const hasFile = message ? message.file : null;
    const [openDialog, setOpenDialog] = useState(false);
    const { enqueueSnackbar } = useSnackbar();
    const getMouseEvents = (mouseEnter, mouseLeave) => ({
        onMouseEnter: mouseEnter,
        onMouseLeave: mouseLeave,
        onTouchStart: mouseEnter,
        onTouchMove: mouseLeave
    });
    const handleMenuItemClick = () => {
        onMenuIconClick();
    };
    const handleDownload = (file) => __awaiter(this, void 0, void 0, function* () {
        try {
            const response = yield fetch(file.url);
            const data = yield response.blob();
            const blob = URL.createObjectURL(data);
            const link = document.createElement('a');
            link.href = blob;
            link.download = file.filename;
            link.click();
            URL.revokeObjectURL(blob);
            link.remove();
        }
        catch (error) {
            console.log(error);
            enqueueSnackbar(error, {
                variant: 'error',
                autoHideDuration: 3000
            });
        }
    });
    // RENDERING
    const renderMessageFile = (m) => {
        if (!m) {
            return null;
        }
        let section = null;
        const defaultSection = (_jsx(Box, Object.assign({ className: classes.other }, { children: _jsxs(Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: _jsx(Icon, { children: "download" }) }, { children: [_jsx(Typography, { children: m.file.filename }), _jsx(Typography, { children: bytesToSize(m.file.filesize) })] })) })));
        if (m.file) {
            let type = m.file.mimetype;
            switch (true) {
                case type.startsWith(SCMessageFileType.IMAGE):
                    section = (_jsx(Box, Object.assign({ className: classes.img }, { children: _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img', onClick: () => setOpenDialog(true) }) })));
                    break;
                case type.startsWith(SCMessageFileType.VIDEO):
                    if (!isSupportedVideoFormat(m.file.filename)) {
                        section = defaultSection;
                    }
                    else {
                        section = (_jsxs(Box, Object.assign({ className: classNames(classes.img, classes.video) }, { children: [_jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), _jsx(IconButton, Object.assign({ onClick: () => setOpenDialog(true) }, { children: _jsx(Icon, { children: "play_circle_outline" }) }))] })));
                    }
                    break;
                case type.startsWith(SCMessageFileType.DOCUMENT):
                    section = (_jsxs(Box, Object.assign({ className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other }, { children: [m.file.filename.endsWith('.pdf') && _jsx("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }), _jsxs(Button, Object.assign({ onClick: () => handleDownload(m.file), startIcon: _jsx(Icon, { children: "download" }) }, { children: [_jsx(Typography, { children: m.file.filename }), _jsx(Typography, { children: bytesToSize(m.file.filesize) })] }))] })));
                    break;
                default:
                    // section = <Icon>hide_image</Icon>;
                    section = defaultSection;
                    break;
            }
        }
        return _jsx(_Fragment, { children: section });
    };
    if (!message) {
        return _jsx(PrivateMessageThreadItemSkeleton, { elevation: 0 });
    }
    /**
     * Renders root object
     */
    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, getMouseEvents(mouseEvents.onMouseEnter, mouseEvents.onMouseLeave), rest, { secondaryAction: (isHovering || isMobile) &&
            showMenuIcon &&
            message.status !== SCPrivateMessageStatusType.HIDDEN && _jsx(PrivateMessageSettingsIconButton, { onMenuItemDeleteClick: handleMenuItemClick }) }, { children: [message.group && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) !== message.sender.username && (_jsx(Typography, Object.assign({ color: "secondary", variant: "h4", className: classes.username }, { children: message.sender.username }))), _jsxs(_Fragment, { children: [hasFile && message.status !== SCPrivateMessageStatusType.HIDDEN ? (renderMessageFile(message)) : (_jsx(Box, Object.assign({ className: classes.text }, { children: _jsx(Typography, { component: "span", dangerouslySetInnerHTML: { __html: message.message } }) }))), _jsx(Typography, Object.assign({ className: classes.messageTime, color: "text.secondary" }, { children: `${intl.formatDate(message.created_at, {
                            hour: 'numeric',
                            minute: 'numeric'
                        })}` }))] }), openDialog && (_jsx(_Fragment, { children: (message === null || message === void 0 ? void 0 : message.file.mimetype.startsWith(SCMessageFileType.VIDEO)) ? (_jsx(DialogRoot, Object.assign({ open: openDialog, onClose: () => setOpenDialog(false), className: classes.dialogRoot }, { children: _jsx(AutoPlayer, { url: message === null || message === void 0 ? void 0 : message.file.url, width: '100%', enableAutoplay: false }) }))) : (_jsx(LightBox, { images: [{ src: message === null || message === void 0 ? void 0 : message.file.url, key: message.file.uuid }], onClose: () => setOpenDialog(false), toolbarButtons: _jsx(IconButton, Object.assign({ onClick: () => handleDownload(message === null || message === void 0 ? void 0 : message.file), className: classes.downloadButton }, { children: _jsx(Icon, { children: "download" }) }), 'download') })) }))] })));
}
