import React, { useMemo } from 'react';
import i18n from 'ui-i18n';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Box from '@mui/material/Box';
import CloseIcon from '@mui/icons-material/Close';
import ViewCompactIcon from '@mui/icons-material/ViewCompact';
import DetailsIcon from '../icons/Details';
import { SmallIconButtonWithTooltip } from '../SmallIconButton';
import { ModeSwitcher } from '../ModeSwitcher';
import { ImageGalleryMode } from './constants';
import { useStyles } from './styles';
export var ImageGalleryDialog = function (_a) {
    var open = _a.open, mode = _a.mode, children = _a.children, header = _a.header, onClose = _a.onClose, onChangeMode = _a.onChangeMode;
    var styles = useStyles();
    var modes = useMemo(function () { return [
        {
            id: ImageGalleryMode.Gallery,
            title: i18n.text('Gallery'),
            Icon: ViewCompactIcon
        },
        {
            id: ImageGalleryMode.Details,
            title: i18n.text('Details'),
            Icon: DetailsIcon
        }
    ]; }, []);
    return (React.createElement(Dialog, { classes: { paper: styles.paper }, open: open, BackdropProps: { className: styles.backdrop }, fullScreen: true },
        React.createElement(AppBar, { classes: { colorPrimary: styles.appBar } },
            React.createElement(Toolbar, { className: styles.toolbar },
                React.createElement(Box, { className: styles.headerLeft },
                    React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Close'), onClick: onClose, className: styles.closeButton, iconClassName: styles.closeIcon, icon: CloseIcon }), header === null || header === void 0 ? void 0 :
                    header.left),
                React.createElement(Box, { className: styles.headerCenter },
                    React.createElement(ModeSwitcher, { modes: modes, modeId: mode, onChange: onChangeMode, className: styles.modeSwitcher })),
                React.createElement(Box, { className: styles.headerRight }, header === null || header === void 0 ? void 0 : header.right))),
        React.createElement(DialogContent, { className: styles.content }, children)));
};
