import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import { T } from 'Framework/i18n';
import Typography from '@material-ui/core/Typography';
import { ImageLoader } from '../ImageLoader/ImageLoader';
import { absoluteCenter } from 'Shared/Styles/absoluteCenter';
import ReactComponent from 'Shared/PropTypes/ReactComponent';

const styles = () => ({
    root: {
        flex: 1,
        display: 'flex',
        flexDirection: 'row',
        '@media (max-aspect-ratio: 10/9)': {
            flexDirection: 'column',
        },
    },
    imageWrapper: {
        flex: '1',
        flexWrap: 'wrap',
        maxHeight: '100%',
        position: 'relative',
        '& > img': {
            maxWidth: '100%',
            maxHeight: '100%',
            ...absoluteCenter(),
        },
    },
    contentWrapper: {
        flex: 1,
        display: 'flex',
    },
    fallbackText: {
        ...absoluteCenter(),
    },
});

export const FallbackVisualization = withStyles(styles, { name: 'FallbackVisualization' })(
    ({ imageSrc, classes, fallbackMode, children, showContent, ProgressComponent }) =>
        fallbackMode ? (
            <div className={classes.root}>
                {imageSrc && (
                    <div className={classes.imageWrapper}>
                        <ImageLoader
                            src={imageSrc}
                            ProgressComponent={ProgressComponent}
                            fallbackElement={
                                <Typography variant="body1" className={classes.fallbackText}>
                                    {T('visualization.errors.visualizationNotPossible')}
                                </Typography>
                            }
                        />
                    </div>
                )}
                {showContent && <div className={classes.contentWrapper}>{children}</div>}
            </div>
        ) : (
            children
        )
);

FallbackVisualization.propTypes = {
    imageSrc: PropTypes.string.isRequired,
    fallbackMode: PropTypes.bool.isRequired,
    showContent: PropTypes.bool,
    ProgressComponent: ReactComponent,
};

FallbackVisualization.defaultProps = {
    showContent: true,
    ProgressComponent: () => null,
};
