'use client';
import { Stage, Layer } from 'react-konva';
import { useEffect, useRef, useState } from 'react';

export default function Konva() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [dimensions, setDimensions] = useState({ width: 800, height: 600 });

  useEffect(() => {
    setDimensions({
      width: window.innerWidth - 500,
      height: window.innerHeight - 200,
    });
  }, []);

  function handleDrop(e: React.DragEvent<HTMLDivElement>) {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    console.log(JSON.parse(data));
  }

  function handleDragOver(e: React.DragEvent<HTMLDivElement>) {
    e.preventDefault();
  }

  return (
    <div
      ref={containerRef}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
      className="w-4/5 h-4/5 border-[1px] rounded-md shadow-sm bg-neutral-800"
    >
      <Stage width={dimensions.width} height={dimensions.height} className="">
        <Layer></Layer>
      </Stage>
    </div>
  );
}