import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Rnd } from 'react-rnd';

const DraggableResizableModal = ({ children }) => {
  const [width, setWidth] = useState(320);
  const [height, setHeight] = useState(240);
  const [x, setX] = useState(300);
  const [y, setY] = useState(72);
  const [isMaximized, setIsMaximized] = useState(false);

  const handleMaximize = () => {
    if (isMaximized) {
      setWidth(320);
      setHeight(240);
      setX(0);
      setY(0);
    } else {
      setWidth(window.innerWidth-20);
      setHeight(window.innerHeight-20);
      setX(0);
      setY(0);
    }

    setIsMaximized(!isMaximized);
  };

  const render = (
    <Rnd className='bg-indigo-100 z-20 !fixed'
      size={{ width: width, height: height }}
      position={{ x: x, y: y }}
      onDragStop={(e, d) => { setX(d.x); setY(d.y); }}
      onResizeStop={(e, direction, ref) => {
        setWidth(ref.style.width);
        setHeight(ref.style.height);
      }}
    >
      <button onClick={handleMaximize}>Maximize</button>
      {children}
    </Rnd>
  );

  return ReactDOM.createPortal(
    render,
    document.body
  );
};

export default DraggableResizableModal;
