import React from 'react';
import PropTypes from 'prop-types';
import { t } from 'Framework/i18n';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Radio from '@material-ui/core/Radio';
import FormControl from '@material-ui/core/FormControl';
import Icon from '@material-ui/core/Icon';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import LoopIcon from '@material-ui/icons/Loop';
import ColorizeIcon from '@material-ui/icons/Colorize';
import FormatPaintIcon from '@material-ui/icons/FormatPaint';
import Switch from '@material-ui/core/Switch';
import Button from '@material-ui/core/Button';
import PhotoLibrary from '@material-ui/icons/PhotoLibrary';
import AddBox from '@material-ui/icons/AddBox';
import ArrowBackIos from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIos from '@material-ui/icons/ArrowForwardIos';
import MainButton from 'Shared/Components/MainButton';
import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';
import MessageBox from 'App/Shared/Components/MessageBox';

import Dialog from '../Dialog';
import ColorPicker from '../ImageColorPicker/ImageColorPicker';
import ImageThumbnail from './ImageThumbnail';
import colorizeIcon from './res/baseline_colorize_black_24dp.png';
import { isOriginalVector } from '../../Utils/Transformers';

const styles = theme => ({
    dialogContent: {
        [theme.breakpoints.down('md')]: {
            marginBottom: 40,
            padding: '8px 0 8px 24px',
            '&.color-preview-block': {
                marginBottom: 0,
            },
        },
        [theme.breakpoints.down('xs')]: {
            marginBottom: 24,
            padding: 0,
        },
    },
    dialogWrapper: {
        maxWidth: '1000px',
        borderTop: '7px solid ' + theme.palette.primary.main,
        padding: '0px 24px 16px 8px',
        overflowX: 'hidden',

        [theme.breakpoints.down('xs')]: {
            padding: 0,
            '& .MuiDialogTitle-root': {
                padding: theme.smallScreen.padding,
            },
        },
    },
    imageUploadSpacing: {
        backgroundColor: 'white',
        [theme.breakpoints.down('sm')]: {
            bottom: 24,
            left: 0,
            right: 0,
            padding: '0 24px 8px',
            position: 'absolute',
        },
        [theme.breakpoints.down('xs')]: {
            bottom: 4,
            padding: 0,
        },
    },
    PreviewDialogButton: {
        fontSize: 15,
        minWidth: 140,
        height: 40,
        '&:disabled': {
            backgroundColor: '#DDDDDD',
            '& span': {
                color: '#C4C4C4',
            },
        },

        '& input': {
            position: 'absolute',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            opacity: 0,

            '&:hover': {
                cursor: 'pointer',
            },
        },
        [theme.breakpoints.down('xs')]: {
            height: 56,
            margin: theme.smallScreen.padding,
        },
    },
    imageTabOptions: {
        backgroundColor: '#E8E8EA',
        borderRadius: '5px',
        '& button': {
            minWidth: '33.33%',
            minHeight: 64,
            textTransform: 'none',
            fontSize: 15,
            color: theme.palette.primary.darkText,
        },
        '& .MuiTabs-indicator': {
            display: 'none',
        },
    },
    colorizeCaption: {
        color: '#757575',
        display: 'flex',
        alignItems: 'center',
        marginTop: 24,
        '& i': {
            marginLeft: 8,
        },
    },
    PreviewDialogImage: {
        '& canvas': {
            // use the colorize icon as cursor directly
            cursor: `url(${colorizeIcon}) 2 21, auto`,
        },
    },
    PreviewDialogImageColorize: {
        '& canvas': {
            cursor: `default`,
        },
    },
    TabContent: {
        padding: 12,
        maxHeight: 330,
        overflow: 'hidden',
        [theme.breakpoints.down('xs')]: {
            padding: '10px 2px',
            maxHeight: '100%',
        },
        [theme.breakpoints.down('sm')]: {
            padding: '12px 0px',
        },
    },
    PreviewDialogGridAlign: {
        padding: '20px 24px',
        [theme.breakpoints.down('xs')]: {
            padding: 10,
        },
    },
    selectedBackgroundFields: {
        display: 'block',
    },
    imageEditDialogItem: {
        maxWidth: 475,
        [theme.breakpoints.down('sm')]: {
            width: '100%',
            maxWidth: '100%',
        },
        [theme.breakpoints.down('xs')]: {
            padding: '16px 16px 8px',
        },
    },
    alignGrid: {
        paddingLeft: 40,
        [theme.breakpoints.down('sm')]: {
            paddingLeft: 0,
        },
        [theme.breakpoints.down('xs')]: {
            paddingLeft: theme.smallScreen.padding,
            paddingRight: theme.smallScreen.padding,
        },
    },
    rootContainerWrapper: {
        flexWrap: 'nowrap',
        [theme.breakpoints.down('sm')]: {
            flexWrap: 'wrap',
        },
        [theme.breakpoints.down('xs')]: {
            overflowY: 'auto',
            marginBottom: 100,
        },
    },
    previewImageWrapper: {
        backgroundSize: '24px 24px',
        marginBottom: 82,
        backgroundImage:
            'linear-gradient(45deg, #F0F0F0 25%, transparent 25%), ' +
            'linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), ' +
            'linear-gradient(45deg, transparent 75%, #F0F0F0 75%), ' +
            'linear-gradient(-45deg, transparent 75%, #F0F0F0 75%)',
        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
        display: 'flex',
        height: 360,
        width: 450,
        '&.color-preview-block': {
            marginBottom: 8,
        },
        [theme.breakpoints.down('sm')]: {
            width: 'auto',
            marginBottom: 0,
        },
        [theme.breakpoints.down('xs')]: {
            overflowY: 'auto',
            flexWrap: 'wrap',
            height: 220,
        },
        '& div:first-child': {
            margin: '5%',
            flex: 1,
            maxHeight: '100%',
            width: '90%',

            '& canvas': {
                display: 'block',
                margin: '0 auto',
            },
        },
    },
    hideTabs: {
        display: 'none',
    },
    imageSelectTab: {
        padding: '24px 16px',
        [theme.breakpoints.down('xs')]: {
            padding: '30px 8px',
        },
    },
    imageSelectTitle: {
        fontWeight: 'bold',
    },
    imageSelectArrowButton: {
        fontSize: 14,
        float: 'left',
        height: 70,
        lineHeight: 70,
        cursor: 'pointer',
        margin: 8,
    },
    imageSelectUploadedImage: {
        '&:first-child': {
            marginLeft: 0,
        },
        width: 70,
        height: 70,
        float: 'left',
        margin: ' 0 10px',
        borderRadius: 8,
        background: '#eee',
        cursor: 'pointer',
        overflow: 'hidden',
        [theme.breakpoints.down('xs')]: {
            margin: 4,
        },
    },
    imageSelectUploadedImageActive: {
        margin: '0 8px',
        border: '2px solid red',
        [theme.breakpoints.down('xs')]: {
            margin: 4,
        },
    },
    imageSelectButton: {
        textTransform: 'none',
        fontWeight: 'bold',
        width: 250,
        padding: '7px 15px',
        [theme.breakpoints.down('xs')]: {
            height: 56,
            width: '98%',
        },
    },
    iconButton: {
        paddingRight: 8,
        color: theme.palette.primary.darkText,
    },
    imageSelectGrid: {
        [theme.breakpoints.down('xs')]: {
            padding: '8px 0 !important',
            display: 'flex',
            justifyContent: 'space-between',
        },
    },
    imageTab: {
        '&.Mui-selected': {
            backgroundColor: theme.palette.primary.main,
            color: '#FFFFFF',
        },
        [theme.breakpoints.down('xs')]: {
            fontWeight: 'bold',
            fontSize: '13px !important',
        },
    },
    colorPreviewToggleContainer: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'baseline',
        marginBottom: 8,
        '&.align-container': {
            marginBottom: 75,
            [theme.breakpoints.down('sm')]: {
                marginBottom: 0,
            },
        },
    },
    colorSwitchBase: {
        color: theme.designer.imageEditDialog.errorColor,
        '&$colorChecked': {
            color: theme.designer.imageEditDialog.errorColor,
        },
    },
    colorBar: {
        backgroundColor: theme.designer.imageEditDialog.errorColor,
    },
    colorChecked: {},
    errorContainer: {
        color: theme.designer.imageEditDialog.errorColor,
    },
    buttonContent: {
        color: theme.palette.primary.darkText,
    },
    delayMessageContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        display: 'flex',
        alignItems: 'center',
        zIndex: 3,
        backgroundColor: 'transparent',
    },
    delayMessageInner: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'column',
        display: 'flex',
        paddingTop: 72,
    },
    delayMessage: {
        color: theme.palette.text.secondary,
        fontSize: 18,
        fontWeight: 'bold',
    },
});

class ImageEditDialog extends React.Component {
    static propTypes = {
        classes: PropTypes.object,
        width: PropTypes.string,
        backgroundSelected: PropTypes.string,
        changeSelectedBackground: PropTypes.func,
        preview: PropTypes.string,
        open: PropTypes.bool,
        closePreviewDialog: PropTypes.func,
        continueClick: PropTypes.func,
        onChangeColor: PropTypes.func,
        imageColorizeElement: PropTypes.element,
        activeTabIndex: PropTypes.number,
        onActiveTabChange: PropTypes.func,
        colorDisabled: PropTypes.bool,
        errorFeedback: PropTypes.element,
        loaderComponent: PropTypes.element,
        continueButtonDisabled: PropTypes.bool,
        image: PropTypes.object,
        userImages: PropTypes.array,
        setSelectedImage: PropTypes.func.isRequired,
        onGalleryClick: PropTypes.func,
        galleryHasImages: PropTypes.bool,
        showWarningMessage: PropTypes.bool,
        displayColorPreview: PropTypes.bool,
        uploadDelayed: PropTypes.bool,
        onOriginalImageAndColorPreviewToggleClick: PropTypes.func,
        originalImagePreview: PropTypes.string,
        embroideryNoticeRef: PropTypes.object,
        colorPreviewBlockActive: PropTypes.bool.isRequired,
        colorPreviewRequirementFulfilled: PropTypes.bool.isRequired,
        showUploadPanel: PropTypes.bool.isRequired,
        uploadDisabled: PropTypes.bool.isRequired,
        setUpload: PropTypes.func.isRequired,
        imageUploadElement: PropTypes.element,
        onNewUploadClick: PropTypes.func.isRequired,
        uploadImage: PropTypes.func.isRequired,
        selectUserImage: PropTypes.func.isRequired,
        loopIcon: PropTypes.element,
        colorizeIcon: PropTypes.element,
        formatPaintIcon: PropTypes.element,
        photoLibraryIcon: PropTypes.element,
        addIcon: PropTypes.element,
    };

    constructor(props) {
        super(props);

        this.state = {
            userImagesIndex: 0,
        };
    }

    onChangeColor = color => {
        const { onChangeColor, activeTabIndex } = this.props;

        onChangeColor && activeTabIndex === 1 && onChangeColor(color);
    };

    onActiveTabChange = (e, newActiveTabIndex) => {
        const { onActiveTabChange } = this.props;
        onActiveTabChange && onActiveTabChange(newActiveTabIndex);
    };

    onSelectedBackgroundChange = (e, value) => {
        const { changeSelectedBackground } = this.props;
        const selectedBackground = value ? 'replace' : null;

        changeSelectedBackground && changeSelectedBackground(selectedBackground);
    };

    changeSelectedBackground = (e, value) => {
        const { changeSelectedBackground } = this.props;

        changeSelectedBackground && changeSelectedBackground(value);
    };

    setUserImagesIndexPrev = () => {
        const { userImagesIndex } = this.state;

        const newIndex = userImagesIndex - 1;

        if (newIndex < 0) {
            return;
        }

        this.setState({ userImagesIndex: newIndex });
    };

    setUserImagesIndexNext = () => {
        const { userImages } = this.props;
        const { userImagesIndex } = this.state;

        const newIndex = userImagesIndex + 1;
        const lastAvailableIndex = userImages.length - 3;

        if (newIndex > lastAvailableIndex) {
            return;
        }

        this.setState({ userImagesIndex: newIndex });
    };

    getWarningMessageText = () => {
        return t('imageEditDialog.warningMessage');
    };

    galleryClick = () => {
        const { onGalleryClick } = this.props;
        onGalleryClick && onGalleryClick();
    };

    render() {
        const {
            classes,
            backgroundSelected,
            preview,
            errorFeedback,
            open,
            closePreviewDialog,
            continueClick,
            loaderComponent,
            imageColorizeElement,
            activeTabIndex,
            width,
            colorDisabled,
            image,
            userImages,
            galleryHasImages,
            showWarningMessage,
            displayColorPreview,
            onOriginalImageAndColorPreviewToggleClick,
            originalImagePreview,
            embroideryNoticeRef,
            colorPreviewBlockActive,
            colorPreviewRequirementFulfilled,
            uploadDisabled,
            imageUploadElement,
            onNewUploadClick,
            uploadImage,
            selectUserImage,
            showUploadPanel,
            uploadDelayed,
            loopIcon,
            colorizeIcon,
            formatPaintIcon,
            photoLibraryIcon,
            addIcon,
        } = this.props;

        const { userImagesIndex } = this.state;

        const userImagesIndexes = [];

        for (let i = userImagesIndex; i < userImages.length && i < userImagesIndex + 3; i++) {
            userImagesIndexes.push(i);
        }

        const showNewUploadArea = showUploadPanel || !image;
        const colorPreviewErrorContainer = classes.colorPreviewToggleContainer + ' ' + classes.errorContainer;

        return (
            <Dialog
                paperClassName={classes.dialogWrapper}
                open={open}
                onClose={closePreviewDialog}
                dialogTitle={showUploadPanel ? t('fileUpload.uploadLogo') : t('fileUpload.logoPreview')}
                maxWidth="lg"
                fullWidth={true}
                fullScreen={isWidthDown('sm', width)}
                scroll="paper"
            >
                <DialogContent
                    className={`${classes.dialogContent} ${
                        colorPreviewBlockActive ? 'color-preview-block' : ''
                    }`}
                >
                    {loaderComponent}
                    {uploadDelayed && (
                        <div className={classes.delayMessageContainer}>
                            <div className={classes.delayMessageInner}>
                                <Typography className={classes.delayMessage}>
                                    {t('imageEditDialog.uploadDelayed')}
                                </Typography>
                            </div>
                        </div>
                    )}
                    <Grid container className={classes.rootContainerWrapper}>
                        {showNewUploadArea && (
                            <Grid item xs={12} sm={12} className={classes.imageEditDialogItem}>
                                {imageUploadElement}
                            </Grid>
                        )}
                        {!showNewUploadArea && (
                            <Grid item xs={12} sm={12} className={classes.imageEditDialogItem}>
                                {errorFeedback}
                                <div
                                    className={`${classes.previewImageWrapper} ${
                                        colorPreviewBlockActive ? 'color-preview-block' : ''
                                    }`}
                                >
                                    <ColorPicker
                                        src={
                                            [0, 2].includes(activeTabIndex) &&
                                            !displayColorPreview &&
                                            !image.gallery &&
                                            !isOriginalVector(image)
                                                ? originalImagePreview
                                                : preview
                                        }
                                        wrapperClassName={
                                            activeTabIndex === 1
                                                ? classes.PreviewDialogImage
                                                : classes.PreviewDialogImageColorize
                                        }
                                        onChange={this.onChangeColor}
                                        enabled={activeTabIndex === 1}
                                    />
                                </div>

                                {colorPreviewBlockActive && (
                                    <>
                                        <div
                                            ref={embroideryNoticeRef}
                                            className={`${
                                                !colorPreviewRequirementFulfilled
                                                    ? colorPreviewErrorContainer
                                                    : classes.colorPreviewToggleContainer
                                            } ${
                                                displayColorPreview && !showWarningMessage
                                                    ? 'align-container'
                                                    : ''
                                            }`}
                                        >
                                            <Typography>{t('imageEditDialog.originalPicture')}</Typography>
                                            <Switch
                                                classes={{
                                                    switchBase: !colorPreviewRequirementFulfilled
                                                        ? classes.colorSwitchBase
                                                        : '',
                                                    checked: !colorPreviewRequirementFulfilled
                                                        ? classes.colorChecked
                                                        : '',
                                                    track: !colorPreviewRequirementFulfilled
                                                        ? classes.colorBar
                                                        : '',
                                                }}
                                                checked={displayColorPreview}
                                                onChange={onOriginalImageAndColorPreviewToggleClick}
                                                color="primary"
                                            />
                                            <Typography>{t('imageEditDialog.colorPreview')}</Typography>
                                        </div>

                                        {displayColorPreview ? (
                                            <>
                                                {showWarningMessage && (
                                                    <MessageBox
                                                        text={this.getWarningMessageText()}
                                                        type="warning"
                                                    />
                                                )}
                                            </>
                                        ) : (
                                            <MessageBox
                                                text={
                                                    !colorPreviewRequirementFulfilled
                                                        ? t('imageEditDialog.pictureEmbroideryHint')
                                                        : t('imageEditDialog.pictureToggleHint')
                                                }
                                                type={!colorPreviewRequirementFulfilled ? 'error' : 'warning'}
                                            />
                                        )}
                                    </>
                                )}
                            </Grid>
                        )}
                        <Grid
                            item
                            xs={12}
                            sm={12}
                            className={
                                classes.alignGrid +
                                (showUploadPanel && width === 'xs' ? ' ' + classes.hideTabs : '')
                            }
                        >
                            <AnalyticsWrapper targetId="image_edit_options">
                                <Tabs
                                    className={classes.imageTabOptions}
                                    value={activeTabIndex}
                                    onChange={this.onActiveTabChange}
                                    indicatorColor="primary"
                                    textColor="primary"
                                    variant={isWidthDown('xs', width) ? 'fullWidth' : 'standard'}
                                >
                                    <Tab
                                        icon={loopIcon ?? <LoopIcon />}
                                        className={classes.imageTab}
                                        label={t('imageEditDialog.changeFile')}
                                    />
                                    <Tab
                                        icon={colorizeIcon ?? <ColorizeIcon />}
                                        className={classes.imageTab}
                                        label={t('imageEditDialog.background')}
                                        disabled={image && image.gallery}
                                    />
                                    <Tab
                                        icon={formatPaintIcon ?? <FormatPaintIcon />}
                                        className={classes.imageTab}
                                        label={t('imageEditDialog.colorize')}
                                        disabled={colorDisabled}
                                    />
                                </Tabs>
                            </AnalyticsWrapper>
                            {activeTabIndex === 0 && (
                                <div className={`${classes.TabContent} ${classes.imageSelectTab}`}>
                                    <Grid container spacing={2}>
                                        {!showNewUploadArea && (
                                            <Grid item xs={12} className={classes.imageSelectGrid}>
                                                <Typography className={classes.imageSelectTitle}>
                                                    {t('imageEditDialog.selectFromMyUploads')}
                                                </Typography>
                                            </Grid>
                                        )}
                                        {!showNewUploadArea && (
                                            <Grid
                                                item
                                                xs={12}
                                                className={classes.imageSelectGrid}
                                                style={{
                                                    justifyContent:
                                                        userImages.length > 3 ? 'space-between' : 'start',
                                                }}
                                            >
                                                {userImages.length > 3 && (
                                                    <ArrowBackIos
                                                        className={classes.imageSelectArrowButton}
                                                        onClick={this.setUserImagesIndexPrev}
                                                    />
                                                )}
                                                {userImagesIndexes.map((imageIndex, index) => {
                                                    const isActive =
                                                        image &&
                                                        userImages[imageIndex].identifier ===
                                                            image.identifier;
                                                    return (
                                                        <div
                                                            key={index}
                                                            className={
                                                                classes.imageSelectUploadedImage +
                                                                (isActive
                                                                    ? ' ' +
                                                                      classes.imageSelectUploadedImageActive
                                                                    : '')
                                                            }
                                                            onClick={() => selectUserImage(imageIndex)}
                                                        >
                                                            <ImageThumbnail image={userImages[imageIndex]} />
                                                        </div>
                                                    );
                                                })}
                                                {userImages.length > 3 && (
                                                    <ArrowForwardIos
                                                        className={classes.imageSelectArrowButton}
                                                        onClick={this.setUserImagesIndexNext}
                                                    />
                                                )}
                                            </Grid>
                                        )}
                                        {galleryHasImages && (
                                            <Grid item xs={12} className={classes.imageSelectGrid}>
                                                <Button
                                                    onClick={this.galleryClick}
                                                    variant="outlined"
                                                    className={classes.imageSelectButton}
                                                    fullWidth={isWidthDown('sm', width)}
                                                >
                                                    {photoLibraryIcon ?? (
                                                        <PhotoLibrary className={classes.iconButton} />
                                                    )}
                                                    <span className={classes.buttonContent}>
                                                        {t('imageEditDialog.selectFromGallery')}
                                                    </span>
                                                </Button>
                                            </Grid>
                                        )}
                                        {!showNewUploadArea && (
                                            <Grid item xs={12} className={classes.imageSelectGrid}>
                                                <Button
                                                    onClick={onNewUploadClick}
                                                    variant="outlined"
                                                    className={classes.imageSelectButton}
                                                    fullWidth={isWidthDown('sm', width)}
                                                >
                                                    {addIcon ?? <AddBox className={classes.iconButton} />}
                                                    <span className={classes.buttonContent}>
                                                        {t('imageEditDialog.uploadNewImage')}
                                                    </span>
                                                </Button>
                                            </Grid>
                                        )}
                                    </Grid>
                                </div>
                            )}
                            {activeTabIndex === 1 && (
                                <div className={classes.TabContent + ' ' + classes.PreviewDialogGridAlign}>
                                    <FormControl
                                        component="fieldset"
                                        className={classes.selectedBackgroundFields}
                                    >
                                        <FormControlLabel
                                            control={
                                                <Switch
                                                    checked={backgroundSelected !== null}
                                                    onChange={this.onSelectedBackgroundChange}
                                                    color="primary"
                                                />
                                            }
                                            label={t('fileUpload.removeBackground')}
                                        />
                                        <AnalyticsWrapper targetId="image_background">
                                            <RadioGroup
                                                aria-label="background removement"
                                                name="backgroundRemovement"
                                                value={backgroundSelected ? backgroundSelected : ''}
                                                onChange={this.changeSelectedBackground}
                                            >
                                                <FormControlLabel
                                                    value={'flood'}
                                                    control={<Radio color="primary" />}
                                                    label={t('fileUpload.removeBackgroundFromBorder')}
                                                    disabled={backgroundSelected === null}
                                                />
                                                <FormControlLabel
                                                    value={'replace'}
                                                    control={<Radio color="primary" />}
                                                    label={t('fileUpload.removeBackgroundEverywhere')}
                                                    disabled={backgroundSelected === null}
                                                />
                                            </RadioGroup>
                                        </AnalyticsWrapper>
                                    </FormControl>
                                    <Typography variant="caption" className={classes.colorizeCaption}>
                                        {colorizeIcon ?? <Icon>colorize</Icon>}
                                        <i>
                                            {t(
                                                isWidthDown('xs', width)
                                                    ? 'fileUpload.tabColorForRemove'
                                                    : 'fileUpload.chooseColorForRemove'
                                            )}
                                        </i>
                                    </Typography>
                                </div>
                            )}
                            {activeTabIndex === 2 && (
                                <div className={classes.TabContent}>{imageColorizeElement}</div>
                            )}
                        </Grid>
                    </Grid>
                </DialogContent>
                <DialogActions className={classes.imageUploadSpacing}>
                    {!showUploadPanel && (
                        <MainButton
                            onClick={continueClick}
                            variant="contained"
                            className={classes.PreviewDialogButton}
                            disabled={userImages.length === 0 && !image}
                            fullWidth={isWidthDown('xs', width)}
                        >
                            {t('fileUpload.continue')}
                        </MainButton>
                    )}
                    {showUploadPanel && (
                        <MainButton
                            fullWidth={isWidthDown('xs', width)}
                            onClick={uploadImage}
                            variant="contained"
                            className={classes.PreviewDialogButton}
                            disabled={uploadDisabled}
                        >
                            {t('fileUpload.continue')}
                        </MainButton>
                    )}
                </DialogActions>
            </Dialog>
        );
    }
}

export default withStyles(styles, { name: 'ImageEditDialog' })(withWidth()(ImageEditDialog));
