import { Dialog, makeStyles } from '@material-ui/core';
import React, { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ImageViewerSideSheet } from './ImageViewerSideSheet';
import { Image } from './Image';
import { ImageFooter } from './ImageFooter';
import { AmbientCard } from '../../surfaces/cards/AmbientCard';
import { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';
import { getIconFromName } from '../../../utilities/tree/TreeUtilities';
const useStyles = makeStyles(theme => ({
    root: {
        backgroundColor: theme.palette.background.paper,
    },
    imagesWrapper: {
        display: 'flex',
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        alignItems: 'center',
    },
    imageSection: {
        width: '100%',
        height: '100%',
    },
    image: {
        objectFit: 'contain',
        display: 'block',
        flexShrink: 0,
        flexGrow: 0,
        transition: 'translate 300ms ease-in-out',
    },
    openSideSheetIcon: {
        display: 'block',
        position: 'absolute',
        top: props => ((props === null || props === void 0 ? void 0 : props.title) ? 64 : 8),
        right: 8,
        zIndex: 3,
        backgroundColor: theme.palette.background.paper,
    },
    dialogContent: {
        overflow: 'hidden',
        width: '100vw',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
    },
    closeDialog: {
        margin: theme.spacing(1),
    },
    dialogImageSection: {
        flex: 2,
        height: '100%',
    },
}));
const defaultFieldMapping = {
    filePath: 'filePath',
    fileName: 'fileName',
    primaryText: 'primaryText',
    secondaryText: 'secondaryText',
};
export const ImageSlider = props => {
    const { title, images, fieldMapping = defaultFieldMapping, sideSheetTitle, sideSheetWidth, hideDownload, hidePrimaryText, hideSecondaryText, hidePrimaryTextInExpandMode, hideSecondaryTextInExpandMode, expandInSideSheet = true, } = props;
    const classes = useStyles(props);
    const { t } = useTranslation();
    const [currentImageIndex, setCurrentImageIndex] = useState(0);
    const [openSideSheet, setOpenSideSheet] = useState(false);
    const handleViewImage = useCallback((previous = false) => {
        if (previous) {
            setCurrentImageIndex(prev => prev - 1);
        }
        else {
            setCurrentImageIndex(prev => prev + 1);
        }
    }, []);
    const handleExpandImage = useCallback(() => {
        setOpenSideSheet(true);
    }, []);
    const currentImageObj = useMemo(() => {
        const imgObj = images === null || images === void 0 ? void 0 : images[currentImageIndex];
        if (!imgObj)
            return {};
        return {
            filePath: imgObj[fieldMapping === null || fieldMapping === void 0 ? void 0 : fieldMapping.filePath],
            fileName: imgObj[fieldMapping === null || fieldMapping === void 0 ? void 0 : fieldMapping.fileName],
            primaryText: imgObj[fieldMapping === null || fieldMapping === void 0 ? void 0 : fieldMapping.primaryText],
            secondaryText: imgObj[fieldMapping === null || fieldMapping === void 0 ? void 0 : fieldMapping.secondaryText],
        };
    }, [currentImageIndex, fieldMapping, images]);
    return (React.createElement(AmbientCard, { fullWidth: true, title: title, removePadding: true, lastChildBottomPadding: "0px", removeTopLayoutUnit: true }, React.createElement("div", { className: classes.imagesWrapper }, images === null || images === void 0 ? void 0 : images.map(image => (React.createElement("img", { src: image === null || image === void 0 ? void 0 : image[fieldMapping === null || fieldMapping === void 0 ? void 0 : fieldMapping.filePath], alt: `${image === null || image === void 0 ? void 0 : image[fieldMapping === null || fieldMapping === void 0 ? void 0 : fieldMapping.fileName]}`, loading: "lazy", width: "100%", height: "auto", className: classes.image, style: { translate: `${-100 * currentImageIndex}%` } })))), React.createElement(IconButtonWithTooltip, { icon: getIconFromName('MiniExpand'), title: t('Expand Image'), onClick: handleExpandImage, id: "udpRecord-ImageSlider-ExpandBtn", udprecordid: "udpRecord-ImageSlider-ExpandBtn", className: classes.openSideSheetIcon }), React.createElement(ImageFooter, { images: images, currentImageObj: currentImageObj, hidePrimaryText: hidePrimaryText, hideSecondaryText: hideSecondaryText, handleViewImage: handleViewImage, currentImageIndex: currentImageIndex }), expandInSideSheet ? (React.createElement(ImageViewerSideSheet, { title: sideSheetTitle, open: openSideSheet, onClose: () => {
            setOpenSideSheet(false);
        }, imageObj: currentImageObj, width: sideSheetWidth, hideDownload: hideDownload, hidePrimaryText: hidePrimaryTextInExpandMode, hideSecondaryText: hideSecondaryTextInExpandMode })) : (React.createElement(Dialog, { onClose: () => {
            setOpenSideSheet(false);
        }, open: openSideSheet, fullScreen: true }, React.createElement("div", { className: classes.dialogContent }, React.createElement("div", { className: classes.closeDialog }, React.createElement(IconButtonWithTooltip, { icon: getIconFromName('Cancel'), title: t('Close'), onClick: () => {
            setOpenSideSheet(false);
        }, id: "udpRecord-ImageSlider-PreviousBtn", udprecordid: "udpRecord-ImageSlider-PreviousBtn" })), React.createElement("div", { className: classes.dialogImageSection }, React.createElement(Image, { imageObj: currentImageObj, hidePrimaryText: hidePrimaryTextInExpandMode, hideSecondaryText: hideSecondaryTextInExpandMode })))))));
};
//# sourceMappingURL=ImageSlider.js.map