import React, {useState} from "react";

import style from "./zoomableImage.module.sass";

const ZoomableImage = (props) => {
    const [isHoverPicture, setStatusHoverPicture] = useState(false);
    const [xMouseCoordinate, setXMouseCoordinate] = useState(0);
    const [yMouseCoordinate, setYMouseCoordinate] = useState(0);
    const {src} = props;

    const dynamicStyle = {
        transformOrigin: `${xMouseCoordinate}px ${yMouseCoordinate}px`,
        transform: 'scale(2.5)'
    };
    const mouseInPicture = (e) => {
        // console.log(e.pageX - e.target.getBoundingClientRect().left, e.pageY - e.target.getBoundingClientRect().top);
        // setXMouseCoordinate(e.pageX - 350);
        // setYMouseCoordinate(e.pageY - 200);
        // console.log((e.pageX - e.target.getBoundingClientRect().left).toFixed(0));
        console.log(e.target.offsetTop, e.pageX - 400);
        setXMouseCoordinate(e.pageX - e.target.offsetParent.getBoundingClientRect().left);
        setYMouseCoordinate(e.pageY - e.target.offsetParent.getBoundingClientRect().top);
        setStatusHoverPicture(true);
    };
    const mouseLeavePicture = (e) => {
        setStatusHoverPicture(false);
    };


    return(

        <img
            src={src}
            alt={"sliderImg"}
            onMouseMove={mouseInPicture}
            onMouseLeave={mouseLeavePicture}
            style={isHoverPicture ? dynamicStyle:{}}
            className={style.image}
        />

    );
};


export default (ZoomableImage);
