import { Editor } from "@tiptap/react";
import Moveable from "react-moveable";

export const ImageResizer = ({ editor }: { editor: Editor }) => {
  const updateMediaSize = () => {
    const imageInfo = document.querySelector(
      ".ProseMirror-selectednode",
    ) as HTMLImageElement;
    if (imageInfo) {
      const selection = editor.state.selection;
      editor.commands.setImage({
        src: imageInfo.src,
        width: Number(imageInfo.style.width.replace("px", "")),
        height: Number(imageInfo.style.height.replace("px", "")),
      } as any);
      editor.commands.setNodeSelection(selection.from);
    }
  };

  return (
    <>
      <Moveable
        target={document.querySelector(".ProseMirror-selectednode") as any}
        container={null}
        origin={false}
        edge={false}
        throttleDrag={0}
        keepRatio={true}
        resizable={true}
        throttleResize={0}
        onResize={({
          target,
          width,
          height,
          delta,
        }:
          any) => {
          delta[0] && (target!.style.width = `${width}px`);
          delta[1] && (target!.style.height = `${height}px`);
        }}
        onResizeEnd={() => {
          updateMediaSize();
        }}
        scalable={true}
        renderDirections={["w", "e"]}
        onScale={({
          target,
          transform,
        }:
          any) => {
          target!.style.transform = transform;
        }}
      />
    </>
  );
};