import React, { useState } from 'react';
import i18n from 'ui-i18n';
import { uploadImage as uploadImageRequest, getRequestErrorMessage } from '@reltio/mdm-sdk';
import Box from '@mui/material/Box';
import Dialog from '@mui/material/Dialog';
import Typography from '@mui/material/Typography';
import { LinearLoadIndicator } from '../LinearLoadIndicator';
import { ImageByUrlField } from './components/ImageByUrlField';
import { TargetBox } from './components/TargetBox';
import { DividerWithText } from './components/DividerWithText';
import { ErrorSnackbar } from '../ErrorSnackbar';
import { IMAGE_TYPES, MAX_IMAGE_SIZE } from './constants';
import { useMdmEnvironment, useMdmImageServicePath, useMdmTenant } from '../contexts/MdmModuleContext';
import { useStyles } from './styles';
export var UploadImageDialog = function (_a) {
    var open = _a.open, onClose = _a.onClose, onUpload = _a.onUpload;
    var styles = useStyles();
    var _b = useState(false), loading = _b[0], setLoading = _b[1];
    var _c = useState(null), error = _c[0], setError = _c[1];
    var imageServicePath = useMdmImageServicePath();
    var environment = useMdmEnvironment();
    var tenant = useMdmTenant();
    var uploadImage = function (image) {
        setLoading(true);
        uploadImageRequest({ image: image, imageServicePath: imageServicePath, environment: environment, tenant: tenant })
            .then(function (res) {
            onUpload(res);
            onClose();
        })
            .catch(function (err) {
            setError(getRequestErrorMessage(err, i18n.text('Something went wrong')));
        })
            .finally(function () { return setLoading(false); });
    };
    var handleAppendImage = function (image) {
        if (!image) {
            return setError(i18n.text('No image selected.'));
        }
        var size = Number((image.size / 1024 / 1024).toFixed(2));
        var isCorrectType = IMAGE_TYPES.includes(image.type);
        if (size > MAX_IMAGE_SIZE) {
            setError(i18n.text('File size exceeds configured max file size.'));
        }
        else if (!isCorrectType) {
            setError(i18n.text('File format is not supported.'));
        }
        else {
            uploadImage(image);
        }
    };
    var handleSendImage = function (url) {
        uploadImage(url);
    };
    return (React.createElement(Dialog, { open: open, onClose: onClose, classes: { paper: styles.dialogPaper } },
        React.createElement(Typography, { className: styles.title }, i18n.text('Add new image')),
        React.createElement(Box, { className: styles.body },
            React.createElement(TargetBox, { className: styles.targetBox, onAppendFile: handleAppendImage }),
            React.createElement(DividerWithText, { className: styles.divider }, i18n.text('or')),
            React.createElement(ImageByUrlField, { onSend: handleSendImage })),
        loading && React.createElement(LinearLoadIndicator, null),
        React.createElement(ErrorSnackbar, { error: error, onClose: function () { return setError(null); } })));
};
