console.clear();

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            imgZoomed: false,
            selectedImage: null,
            scale: 1,
            myDraggable: null,
            minScale: 1,
            maxScale: 5
        }
      
       this.zoomIn = this.zoomIn.bind(this);
       this.zoomOut = this.zoomOut.bind(this);
       this.zoomReset = this.zoomReset.bind(this);
    }

    componentDidMount() {
       //s this.zoomReset();
      //just to make sure there's a _gsTransform on the element.
      TweenMax.set(this.map, {x:"+=0"});
    }

    zoomIn() {
        var oldScale = this.state.scale;
        let maxScale = this.state.maxScale;
        if(oldScale < maxScale) {
            var newScale = oldScale + 0.15;
            this.zoom(newScale > maxScale ? maxScale : newScale);
        }
    }

    zoomOut() {
        var oldScale = this.state.scale;
        let minScale = this.state.minScale;
        if(oldScale > minScale) {
            var newScale = oldScale - 0.15;
            this.zoom(newScale < minScale ? minScale : newScale);
        }
    }

    zoomReset() {
        let minScale = this.state.minScale;
        this.setState({
            scale: minScale
        });

        this.zoom(minScale);
    }

    getMapRef = b => this.map = b;
    getWrapperRef = b => this.wrapper = b;

    dragInit = () => {
        if (this.state.imgZoomed) {
            this.state.myDraggable = Draggable.create(this.map, {
                type: "x,y",
                dragClickables: true,
                edgeResistance: 0.50,
                throwProps: true,
                minimumMovement: 10,
                zIndexBoost: false
            });
        }
    }

    zoom = (newScale) => {
      const dur = .30;
      var oldScale = this.state.scale;
      const ease = Cubic.InOut;
      let minScale = this.state.minScale;
      let maxScale = this.state.maxScale;
      if ((newScale >= minScale) && (newScale <= maxScale)) {               
          var t = this.map._gsTransform; //this is where all the transform data is stored, assuming this.map is the element.
          var ratio = oldScale === minScale ? 1 + newScale / minScale : (newScale - minScale) / (oldScale - minScale);
          TweenMax.to(this.map, dur, {x:t.x * ratio, y:t.y * ratio, scale:newScale});
          this.setState({
            scale: newScale,
            imgZoomed: true
          });
      }
    }

    render() {

        let imageURL = "https://via.placeholder.com/200x200";
        let imageURL2 = "https://via.placeholder.com/200x200/fffccc";
      
        const transform = {
            //transformOrigin: `50% 50%`
        }

        const classes = Object.assign({}, transform, {
            transform: 'scale(0.6)',
            border: '1px solid blue',
            width: '200px'
        })
         const divStyles2 = {
                    height: '200px',
                    width: '200px',
                    overflow: 'hidden',
                    borderStyle: 'none',
                    position: 'relative',
                    backgroundImage: "url(" + imageURL2 + ")",
             backgroundSize: '100% auto',
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: 'center',
                    backgroundSize: 'contain',
                    zIndex: 0
         }
        const divStyles = {
            height: '200px',
            width: '200px',
            overflow: 'hidden',
            borderStyle: 'none',
            position: 'relative',
            backgroundImage: "url(" + imageURL + ")",
            backgroundSize: '100% auto',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'contain',
            zIndex: 0
        }        
        return (
            <div>
               <div style={{zIndex:200}}>
                    <button onClick={this.zoomIn}> + </button>
                    <button onClick={this.zoomOut}> - </button>
                </div>
             <div>
            <div style={classes} ref={this.getWrapperRef}>
                <div onMouseDown={this.dragInit}  draggable={this.state.imgZoomed} className="map" ref={this.getMapRef}>
                    <div style={divStyles} alt="image">
                    </div>
                </div>
             </div>
           </div>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById("root"));