import React from "react"
import lowRes from "./mg_low_res.jpg"
import highRes from "./mg_high_res.jpg"
import "./App.css"

const MAGNIFYING_RADIUS = 32
const SCALE_FACTOR = 4

// high w: 2560 h: 1700
// low w: 640 h: 425

class ZoomableImage extends React.Component {
  state = {
    showHover: false,
    pageX: 0,
    pageY: 0
  }

  onMouseEnter = e => {
    // console.log("enter")
    this.setState({
      showHover: true,
      pageX: e.pageX,
      pageY: e.pageY
    })
  }

  onMouseOut = () => {
    console.log("leave")
    // // todo WTF
    // this.setState({
    //   showHover: false
    // })
  }

  onMouseMove = e => {
    // console.log("move", e.pageX, e.pageY)
    this.setState({
      showHover: true,
      pageX: e.pageX,
      pageY: e.pageY
    })
  }

  render() {
    const { pageX, pageY, showHover } = this.state

    console.log(pageX, pageY, showHover)

    let hoverStyle = {
      position: "absolute",
      top: pageY - MAGNIFYING_RADIUS,
      left: pageX - MAGNIFYING_RADIUS,
      zIndex: 1000,
      width: 64,
      height: 64,
      overflow: "hidden",
      pointerEvents: "none",
      borderRadius: "50% 50%"
    }

    let imgStyle = {
      position: "absolute",
      left: pageX * SCALE_FACTOR,
      top: pageY * SCALE_FACTOR
    }

    return (
      <div>
        <img
          onMouseMove={this.onMouseMove}
          onMouseEnter={this.onMouseEnter}
          // onMouseLeave={this.onMouseOut}
          src={lowRes}
          alt=""
        />
        {showHover && (
          <div style={hoverStyle}>
            <div>
              <img style={imgStyle} src={highRes} alt="" />
            </div>
          </div>
        )}
      </div>
    )
  }
}

function App() {
  return (
    <div className="App">
      <ZoomableImage />
    </div>
  )
}

export default App