// import React, { useEffect, useState, useRef } from "react";
// import { drag } from "d3-drag";
// import { select } from "d3-selection";
// import { NodeResizer } from "@reactflow/node-resizer";

// import "@reactflow/node-resizer/dist/style.css";
// import "./style.module.css";
// import { ReactFlowProvider } from "reactflow";

// function ResizeRotateNode({ id, data }: { id: string; data: any }) {
//   const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));

//   const [resizable, setResizable] = useState(true);

//   //const rotateControlRef = useRef(null);
//   const [isSelected, setIsSelected] = useState(false);
//   const [rotation, setRotation] = useState(0);
//   const [rotatable, setRotatable] = useState(true);

//   const [size, setSize] = useState<ResizeParams>({
//     height: data?.height || 100,
//     width: data?.width || 100,
//     x: 0,
//     y: 0,
//   });

//   const [imageSize, setImageSize] = useState<ResizeParams>({
//     height: data?.height || 100,
//     width: data?.width || 100,
//     x: 0,
//     y: 0,
//   });

//   // useEffect(() => {
//   //   if (!rotateControlRef.current) {
//   //     return;
//   //   }

//   //   const selection = select(rotateControlRef.current);
//   //   const dragHandler: any = drag().on("drag", (evt) => {
//   //     const dx = evt.x - 100;
//   //     const dy = evt.y - 100;
//   //     const rad = Math.atan2(dx, dy);
//   //     const deg = rad * (180 / Math.PI);
//   //     setRotation(180 - deg);
//   //   });

//   //   selection.call(dragHandler);
//   // }, [id]);

//   return (
//     <>
//       <div
//         onClick={() => {
//           console.log("click");
//           setIsSelected(true);
//         }}
//         style={{
//           transform: `rotate(${rotation}deg)`,
//           background: "transparent",
//         }}
//         className={"node"}
//       >
//         <ReactFlowProvider>
//           <NodeResizer
//             nodeId={id}
//             isVisible={isSelected}
//             minWidth={10}
//             minHeight={10}
//             onResize={(size, params) => {
//               setSize(params);
//             }}
//             onResizeEnd={async (size, params) => {
//               await delay(2000);
//               setImageSize(params);
//               setIsSelected(false);
//             }}
//           />
//         </ReactFlowProvider>
//         <div
//           className={`nodrag closeButton`}
//           style={{ display: isSelected ? "block" : "none" }}
//         >
//           <button
//             className={`nodrag closeButton w-32 h-32`}
//             onBlur={() => {
//               console.log("blur");
//             }}
//           ></button>
//         </div>
//         {/* <div
//           ref={rotateControlRef}
//           style={{
//             display: isSelected ? "block" : "none",
//           }}
//           className={`nodrag rotateHandle`}
//         /> */}

//         <div>
//           <img
//             width={size.width}
//             height={size.height}
//             src={`https://res.cloudinary.com/dhwxfvlrn/image/fetch/w_${imageSize.width},h_${imageSize.height},g_auto,dpr_2,c_fill/q_auto/${data.src}`}
//             //src={data.src}
//           ></img>
//         </div>
//       </div>
//     </>
//   );
// }

// export { ResizeRotateNode };

export {};
