import React, { PropTypes } from 'react';
import ReactHoverObserver from 'react-hover-observer';
import ReactTouchPosition from './ReactTouchPosition';
import LensTop from './LensTop';
import LensLeft from './LensLeft';
import LensRight from './LensRight';
import LensBottom from './LensBottom';
import EnlargedImage from './EnlargedImage';

const ReactImageMagnify = ({
    className,
    enlargedImageContainerStyle,
    enlargedImageStyle,
    fadeDurationInMs,
    isActivatedOnTouch,
    imageStyle,
    largeImage,
    pressDuration,
    pressMoveThreshold,
    smallImage,
    style
}) => {

    const cursorOffset = {
        x: Math.round(((smallImage.width / largeImage.width) * smallImage.width) / 2),
        y: Math.round(((smallImage.height / largeImage.height) * smallImage.height) / 2)
    };

    return (
        <ReactTouchPosition { ...{
            className,
            isActivatedOnTouch,
            pressDuration,
            pressMoveThreshold,
            style: Object.assign({
                width: `${smallImage.width}px`,
                height: `${smallImage.height}px`,
                position: 'relative'
            }, style)
        }}>
            <img { ...{
                src: smallImage.src,
                alt: smallImage.alt,
                style: Object.assign({
                    width: `${smallImage.width}px`,
                    height: `${smallImage.height}px`,
                    pointerEvents: 'none'
                }, imageStyle)
            }} />
            <EnlargedImage { ...{
                containerStyle: enlargedImageContainerStyle,
                cursorOffset,
                fadeDurationInMs,
                imageStyle: Object.assign({},
                    enlargedImageStyle,
                    { pointerEvents: 'none' }
                ),
                largeImage,
                smallImage,
            }}/>
        </ReactTouchPosition>
    );
}

export const ImageShape = PropTypes.shape({
    alt: PropTypes.string,
    src: PropTypes.string.isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired
});

ReactImageMagnify.propTypes = {
    className: PropTypes.string,
    enlargedImageContainerStyle: PropTypes.object,
    enlargedImageStyle: PropTypes.object,
    isActivatedOnTouch: PropTypes.bool,
    imageStyle: PropTypes.object,
    largeImage: ImageShape,
    pressDuration: PropTypes.number,
    pressMoveThreshold: PropTypes.number,
    smallImage: ImageShape,
    style: PropTypes.object
};

ReactImageMagnify.defaultProps = {
    isActivatedOnTouch: false,
    pressDuration: 100,
    pressMoveThreshold: 5
};

export default ReactImageMagnify;

@@ -51,247 +51,48 @@
 eact
-HoverObserver from 'react-hover-observer';%0Aimport ReactTouchPosition from './ReactTouchPosition';%0Aimport LensTop from './LensTop';%0Aimport LensLeft from './LensLeft';%0Aimport LensRight from './LensRight';%0Aimport LensBottom from './LensBottom
+TouchPosition from './ReactTouchPosition
 ';%0Ai
@@ -159,16 +159,21 @@
 eMagnify
+Touch
  = (%7B%0A  
@@ -708,24 +708,234 @@
 tedOnTouch,%0A
+            mapPropNames: (%7B isActive, isTouchOutside, touchPosition %7D) =%3E (%7B%0A                isHovering: isActive,%0A                isTouchOutside,%0A                cursorPosition: touchPosition%0A            %7D),%0A
             
@@ -2153,16 +2153,21 @@
 eMagnify
+Touch
 .propTyp
@@ -2295,24 +2295,64 @@
 pes.object,%0A
+    fadeDurationInMs: PropTypes.number,%0A
     isActiva
@@ -2597,16 +2597,21 @@
 eMagnify
+Touch
 .default
@@ -2628,84 +2628,29 @@
     
-isActivatedOnTouch: false,%0A    pressDuration: 100,%0A    pressMoveThreshold
+fadeDurationInMs
 : 5
+00
 %0A%7D;%0A
@@ -2682,10 +2682,15 @@
 eMagnify
+Touch
 ;%0A

Implement mapPropNames + cleanup