import React, { useState } from 'react';
import CloseIcon from '@material-ui/icons/Close';
import PropTypes from 'prop-types';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import { withStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import getImageUrl from '../../../../../Utils/getImageUrl';

const styles = theme => ({
    root: {
        position: 'fixed',
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
        [theme.breakpoints.down('xs')]: {
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
        },
    },
    closeButtonContainer: {
        justifyContent: 'flex-end',
        display: 'flex',
        position: 'fixed',
        right: '2rem',
        top: '2rem',
        [theme.breakpoints.down('xs')]: {
            right: '1rem',
        },
        zIndex: 1,
    },
    closeButton: {
        width: '3rem',
        height: '3rem',

        [theme.breakpoints.down('xs')]: {
            width: '2rem',
            height: '2rem',
        },
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '50%',
        border: 'none',
        cursor: 'pointer',
        color: theme.palette.primary.darkText,
    },
});

const ZoomImage = ({
    show,
    onClose,
    image,
    width,
    classes,
    minScale = 1,
    maxScale = 4,
    alignmentAnimationX = -5,
    alignmentAnimationY = -5,
    isLandscapeFormat,
    title,
}) => {
    const [imageLoaded, setImageLoaded] = useState(false);

    const imgStyleLandscape = {
        height: 'auto',
        maxWidth: width,
    };

    const imgStylePortrait = {
        maxHeight: window.innerHeight,
        width: 'auto',
    };

    const handleImageLoaded = () => {
        setImageLoaded(true);
    };

    const handleBackDropClick = (event, reason) => {
        if (reason === 'backdropClick') {
            onClose();
        }
    };

    if (show) {
        return (
            <Modal className={classes.root} open={show} onClose={handleBackDropClick}>
                <>
                    {imageLoaded && (
                        <div className={classes.closeButtonContainer}>
                            <button className={classes.closeButton} onClick={onClose}>
                                <CloseIcon />
                            </button>
                        </div>
                    )}
                    <TransformWrapper
                        initialScale={1}
                        limitToBounds={true}
                        initialPositionX={0}
                        initialPositionY={0}
                        minScale={minScale}
                        maxScale={maxScale}
                        alignmentAnimation={{
                            sizeX: alignmentAnimationX,
                            sizeY: alignmentAnimationY,
                            animationTime: 0,
                            velocityAlignmentTime: 0,
                        }}
                    >
                        <TransformComponent>
                            <img
                                onLoad={handleImageLoaded}
                                src={getImageUrl(image)}
                                style={isLandscapeFormat ? imgStyleLandscape : imgStylePortrait}
                                alt={title}
                            />
                        </TransformComponent>
                    </TransformWrapper>
                </>
            </Modal>
        );
    }

    return null;
};

ZoomImage.propTypes = {
    onClose: PropTypes.func.isRequired,
    show: PropTypes.bool,
    image: PropTypes.string,
    title: PropTypes.string,
    maxScale: PropTypes.number,
    minScale: PropTypes.number,
    alignmentAnimationX: PropTypes.number,
    alignmentAnimationY: PropTypes.number,
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    isLandscapeFormat: PropTypes.bool,
    classes: PropTypes.object,
};

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