/* eslint-disable react/jsx-no-useless-fragment */
import { makeStyles } from '@material-ui/core';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Typography } from '../../dataDisplay/typography/Typography';
import { IconButtonWithTooltip } from '../../inputs/buttons/IconButtonWithToolTip';
import { getIconFromName } from '../../../utilities/tree/TreeUtilities';
const useStyles = makeStyles(theme => ({
    secondaryText: {
        color: theme.palette.text.secondary,
    },
    description: {
        margin: theme.spacing(2),
        display: 'flex',
        flexDirection: 'column',
        gap: theme.spacing(1),
    },
    pageAction: {
        display: 'flex',
        justifyContent: 'space-between',
        gap: theme.spacing(1),
        alignItems: 'center',
    },
}));
export const ImageFooter = props => {
    var _a;
    const { images, currentImageObj, hidePrimaryText, hideSecondaryText, handleViewImage, currentImageIndex, } = props;
    const classes = useStyles();
    const { t } = useTranslation();
    const showItem = useMemo(() => {
        const showPrimaryText = !hidePrimaryText && (currentImageObj === null || currentImageObj === void 0 ? void 0 : currentImageObj.primaryText);
        const showSecondaryText = !hideSecondaryText && (currentImageObj === null || currentImageObj === void 0 ? void 0 : currentImageObj.secondaryText);
        const showPageAction = (images === null || images === void 0 ? void 0 : images.length) > 1;
        return {
            footer: showPageAction || showPrimaryText || showSecondaryText,
            primaryText: showPrimaryText,
            secondaryText: showSecondaryText,
            pageAction: showPageAction,
        };
    }, [currentImageObj, hidePrimaryText, hideSecondaryText, images]);
    return (React.createElement(React.Fragment, null, (showItem === null || showItem === void 0 ? void 0 : showItem.footer) && (React.createElement("div", { className: classes.description }, (showItem === null || showItem === void 0 ? void 0 : showItem.primaryText) && (React.createElement(Typography, { variant: "h6" }, currentImageObj === null || currentImageObj === void 0 ? void 0 : currentImageObj.primaryText)), (showItem === null || showItem === void 0 ? void 0 : showItem.secondaryText) && (React.createElement(Typography, { variant: "subtitle1", className: classes.secondaryText }, currentImageObj === null || currentImageObj === void 0 ? void 0 : currentImageObj.secondaryText)), (showItem === null || showItem === void 0 ? void 0 : showItem.pageAction) && (React.createElement("div", { className: classes.pageAction }, React.createElement(IconButtonWithTooltip, { icon: getIconFromName('ChevronLeft'), title: t('Previous'), disabled: currentImageIndex == 0, onClick: () => {
            handleViewImage(true);
        }, id: "udpRecord-ImageSlider-PreviousBtn", udprecordid: "udpRecord-ImageSlider-PreviousBtn" }), React.createElement("div", null, React.createElement(Typography, null, currentImageIndex + 1, " ", t('of'), " ", (_a = images === null || images === void 0 ? void 0 : images.length) !== null && _a !== void 0 ? _a : 0)), React.createElement(IconButtonWithTooltip, { icon: getIconFromName('ChevronRight'), title: t('Next'), disabled: currentImageIndex === (images === null || images === void 0 ? void 0 : images.length) - 1, onClick: () => {
            handleViewImage();
        }, id: "udpRecord-ImageSlider-NextBtn", udprecordid: "udpRecord-ImageSlider-NextBtn" })))))));
};
//# sourceMappingURL=ImageFooter.js.map