// packages/block-editor/src/components/image-editor/use-transform-image.js
import { useCallback, useMemo, useState } from "@wordpress/element";
import { applyFilters } from "@wordpress/hooks";
function useTransformImage({
  url,
  naturalWidth,
  naturalHeight
}) {
  const [editedUrl, setEditedUrl] = useState();
  const [crop, setCrop] = useState();
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(100);
  const [rotation, setRotation] = useState(0);
  const defaultAspect = naturalWidth / naturalHeight;
  const [aspect, setAspect] = useState(defaultAspect);
  const rotateClockwise = useCallback(() => {
    const angle = (rotation + 90) % 360;
    let naturalAspectRatio = defaultAspect;
    if (rotation % 180 === 90) {
      naturalAspectRatio = 1 / defaultAspect;
    }
    if (angle === 0) {
      setEditedUrl();
      setRotation(angle);
      setAspect(defaultAspect);
      setPosition((prevPosition) => ({
        x: -(prevPosition.y * naturalAspectRatio),
        y: prevPosition.x * naturalAspectRatio
      }));
      return;
    }
    function editImage(event) {
      const canvas = document.createElement("canvas");
      let translateX = 0;
      let translateY = 0;
      if (angle % 180) {
        canvas.width = event.target.height;
        canvas.height = event.target.width;
      } else {
        canvas.width = event.target.width;
        canvas.height = event.target.height;
      }
      if (angle === 90 || angle === 180) {
        translateX = canvas.width;
      }
      if (angle === 270 || angle === 180) {
        translateY = canvas.height;
      }
      const context = canvas.getContext("2d");
      context.translate(translateX, translateY);
      context.rotate(angle * Math.PI / 180);
      context.drawImage(event.target, 0, 0);
      canvas.toBlob((blob) => {
        setEditedUrl(URL.createObjectURL(blob));
        setRotation(angle);
        setAspect(canvas.width / canvas.height);
        setPosition((prevPosition) => ({
          x: -(prevPosition.y * naturalAspectRatio),
          y: prevPosition.x * naturalAspectRatio
        }));
      });
    }
    const el = new window.Image();
    el.src = url;
    el.onload = editImage;
    const imgCrossOrigin = applyFilters(
      "media.crossOrigin",
      void 0,
      url
    );
    if (typeof imgCrossOrigin === "string") {
      el.crossOrigin = imgCrossOrigin;
    }
  }, [rotation, defaultAspect, url]);
  return useMemo(
    () => ({
      editedUrl,
      setEditedUrl,
      crop,
      setCrop,
      position,
      setPosition,
      zoom,
      setZoom,
      rotation,
      setRotation,
      rotateClockwise,
      aspect,
      setAspect,
      defaultAspect
    }),
    [
      editedUrl,
      crop,
      position,
      zoom,
      rotation,
      rotateClockwise,
      aspect,
      defaultAspect
    ]
  );
}
export {
  useTransformImage as default
};
//# sourceMappingURL=use-transform-image.js.map
