import React, { useEffect, useState } from 'react';
import Moveable from 'react-moveable';

const Movable = ({ moveRef, setStyle}) => {

    const [ renderMovable, setRenderMovable ] = useState(false);

    useEffect(() => {
        setRenderMovable(true);
    }, []);

    const handleDrag = e => {
        setStyle(e.transform);
    };

    const onResize= e => {
        console.log("onResize", e.target);
        e.delta[0] && (e.target.style.width = `${e.width}px`);
        e.delta[1] && (e.target.style.height = `${e.height}px`);
    }

    const onRotate = e => {
        setStyle(e.transform);
    }

    if (!renderMovable) return null;

    return (
        <Moveable 
            target={moveRef.current}
            draggable={true}
            resizable={true}
            rotatable={true}
            onRotate={onRotate}
            clipArea={true}
            throttleDrag={0}
            onDrag={handleDrag}
            onResize={onResize}
            bounds={false}
        />
    );
};

export default Movable;