var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _EdenImageCropper_render, _EdenImageCropper_loadImage, _EdenImageCropper_setupResizeObserver, _EdenImageCropper_handleResize, _EdenImageCropper_initializeCropBox, _EdenImageCropper_updateCropBox, _EdenImageCropper_attachEventListeners, _EdenImageCropper_onDragStart, _EdenImageCropper_onDrag, _EdenImageCropper_onDragEnd, _EdenImageCropper_onResizeStart, _EdenImageCropper_onResize, _EdenImageCropper_onResizeEnd, _EdenImageCropper_getCropData;
import template from "./eden-image-cropper.template.js";
import styles from "./eden-image-cropper.styles.js";
import html from "../../services/html.js";
import { dragCropBox, initializeCropBox, resizeCropBoxFromHandle, resizeCropBoxToViewport, toNaturalCropData, } from "./eden-image-cropper-state.js";
class EdenImageCropper extends HTMLElement {
    constructor({ imageSrc, targetWidth, targetHeight, onCrop, metadata, }) {
        super();
        this.imageElement = null;
        this.containerRect = null;
        this.imageRect = null;
        this.resizeObserver = null;
        this.isLoading = true;
        _EdenImageCropper_render.set(this, () => {
            this.innerHTML = html `
      <style>
        ${styles}
      </style>
      ${template()}
    `;
            this.container = this.querySelector(".cropper-container");
            this.imageElement = this.querySelector(".cropper-image");
            this.cropBoxElement = this.querySelector(".crop-box");
            this.overlay = this.querySelector(".cropper-overlay");
            __classPrivateFieldGet(this, _EdenImageCropper_attachEventListeners, "f").call(this);
        });
        _EdenImageCropper_loadImage.set(this, async () => {
            return new Promise((resolve, reject) => {
                if (!this.imageElement) {
                    reject(new Error("Image element not found"));
                    return;
                }
                this.imageElement.onload = () => {
                    this.isLoading = false;
                    const loader = this.querySelector(".cropper-loader");
                    if (loader) {
                        loader.remove();
                    }
                    this.imageElement.style.opacity = "1";
                    __classPrivateFieldGet(this, _EdenImageCropper_initializeCropBox, "f").call(this);
                    __classPrivateFieldGet(this, _EdenImageCropper_setupResizeObserver, "f").call(this);
                    resolve(void 0);
                };
                this.imageElement.onerror = reject;
                this.imageElement.src = this.imageSrc;
            });
        });
        _EdenImageCropper_setupResizeObserver.set(this, () => {
            this.resizeObserver = new ResizeObserver(() => {
                __classPrivateFieldGet(this, _EdenImageCropper_handleResize, "f").call(this);
            });
            this.resizeObserver.observe(this.container);
        });
        _EdenImageCropper_handleResize.set(this, () => {
            if (!this.imageElement || !this.containerRect || !this.imageRect)
                return;
            const previousImageRect = this.imageRect;
            const naturalWidth = this.imageElement.naturalWidth;
            const naturalHeight = this.imageElement.naturalHeight;
            this.containerRect = this.container.getBoundingClientRect();
            this.imageRect = this.imageElement.getBoundingClientRect();
            this.cropBox = resizeCropBoxToViewport({
                cropBox: this.cropBox,
                previousImageRect,
                nextImageRect: this.imageRect,
                naturalWidth,
                naturalHeight,
            });
            __classPrivateFieldGet(this, _EdenImageCropper_updateCropBox, "f").call(this);
        });
        _EdenImageCropper_initializeCropBox.set(this, () => {
            if (!this.imageElement)
                return;
            this.containerRect = this.container.getBoundingClientRect();
            this.imageRect = this.imageElement.getBoundingClientRect();
            this.cropBox = initializeCropBox({
                imageRect: this.imageRect,
                naturalWidth: this.imageElement.naturalWidth,
                naturalHeight: this.imageElement.naturalHeight,
                targetWidth: this.targetWidth,
                targetHeight: this.targetHeight,
                aspectRatio: this.aspectRatio,
                metadata: this.metadata,
            });
            __classPrivateFieldGet(this, _EdenImageCropper_updateCropBox, "f").call(this);
        });
        _EdenImageCropper_updateCropBox.set(this, () => {
            if (!this.cropBoxElement)
                return;
            this.cropBoxElement.style.left = `${this.cropBox.x}px`;
            this.cropBoxElement.style.top = `${this.cropBox.y}px`;
            this.cropBoxElement.style.width = `${this.cropBox.width}px`;
            this.cropBoxElement.style.height = `${this.cropBox.height}px`;
            const clipPath = `polygon(
      0 0,
      100% 0,
      100% 100%,
      0 100%,
      0 0,
      ${this.cropBox.x}px ${this.cropBox.y}px,
      ${this.cropBox.x}px ${this.cropBox.y + this.cropBox.height + 2}px,
      ${this.cropBox.x + this.cropBox.width + 2}px ${this.cropBox.y + this.cropBox.height + 2}px,
      ${this.cropBox.x + this.cropBox.width + 2}px ${this.cropBox.y}px,
      ${this.cropBox.x}px ${this.cropBox.y}px
    )`;
            this.overlay.style.clipPath = clipPath;
        });
        _EdenImageCropper_attachEventListeners.set(this, () => {
            this.cropBoxElement.addEventListener("mousedown", __classPrivateFieldGet(this, _EdenImageCropper_onDragStart, "f"));
            const handles = this.cropBoxElement.querySelectorAll(".crop-box__handle");
            handles.forEach((handle) => {
                handle.addEventListener("mousedown", __classPrivateFieldGet(this, _EdenImageCropper_onResizeStart, "f"));
            });
        });
        _EdenImageCropper_onDragStart.set(this, (e) => {
            const target = e.target;
            if (!target || target.classList.contains("crop-box__handle"))
                return;
            this.isDragging = true;
            this.startX = e.clientX - this.cropBox.x;
            this.startY = e.clientY - this.cropBox.y;
            document.addEventListener("mousemove", __classPrivateFieldGet(this, _EdenImageCropper_onDrag, "f"));
            document.addEventListener("mouseup", __classPrivateFieldGet(this, _EdenImageCropper_onDragEnd, "f"));
            e.preventDefault();
        });
        _EdenImageCropper_onDrag.set(this, (e) => {
            if (!this.isDragging || !this.imageRect)
                return;
            this.cropBox = dragCropBox({
                cropBox: this.cropBox,
                imageRect: this.imageRect,
                startX: this.startX,
                startY: this.startY,
                clientX: e.clientX,
                clientY: e.clientY,
            });
            __classPrivateFieldGet(this, _EdenImageCropper_updateCropBox, "f").call(this);
        });
        _EdenImageCropper_onDragEnd.set(this, () => {
            this.isDragging = false;
            document.removeEventListener("mousemove", __classPrivateFieldGet(this, _EdenImageCropper_onDrag, "f"));
            document.removeEventListener("mouseup", __classPrivateFieldGet(this, _EdenImageCropper_onDragEnd, "f"));
        });
        _EdenImageCropper_onResizeStart.set(this, (e) => {
            const event = e;
            const target = event.target;
            if (!target || !target.dataset.handle)
                return;
            this.isResizing = true;
            this.resizeHandle = target.dataset.handle;
            this.startX = event.clientX;
            this.startY = event.clientY;
            this.startCropBox = { ...this.cropBox };
            document.addEventListener("mousemove", __classPrivateFieldGet(this, _EdenImageCropper_onResize, "f"));
            document.addEventListener("mouseup", __classPrivateFieldGet(this, _EdenImageCropper_onResizeEnd, "f"));
            e.preventDefault();
            e.stopPropagation();
        });
        _EdenImageCropper_onResize.set(this, (e) => {
            if (!this.isResizing ||
                !this.imageElement ||
                !this.imageRect ||
                !this.resizeHandle) {
                return;
            }
            this.cropBox = resizeCropBoxFromHandle({
                startCropBox: this.startCropBox,
                resizeHandle: this.resizeHandle,
                startX: this.startX,
                clientX: e.clientX,
                imageRect: this.imageRect,
                naturalWidth: this.imageElement.naturalWidth,
                naturalHeight: this.imageElement.naturalHeight,
                targetWidth: this.targetWidth,
                targetHeight: this.targetHeight,
                aspectRatio: this.aspectRatio,
            });
            __classPrivateFieldGet(this, _EdenImageCropper_updateCropBox, "f").call(this);
        });
        _EdenImageCropper_onResizeEnd.set(this, () => {
            this.isResizing = false;
            this.resizeHandle = null;
            document.removeEventListener("mousemove", __classPrivateFieldGet(this, _EdenImageCropper_onResize, "f"));
            document.removeEventListener("mouseup", __classPrivateFieldGet(this, _EdenImageCropper_onResizeEnd, "f"));
        });
        this.onConfirm = async () => {
            const cropData = __classPrivateFieldGet(this, _EdenImageCropper_getCropData, "f").call(this);
            if (this.onCrop) {
                await this.onCrop(cropData);
            }
        };
        _EdenImageCropper_getCropData.set(this, () => {
            if (!this.imageElement || !this.imageRect) {
                return { x: 0, y: 0, width: 0, height: 0 };
            }
            return toNaturalCropData({
                cropBox: this.cropBox,
                imageRect: this.imageRect,
                naturalWidth: this.imageElement.naturalWidth,
                naturalHeight: this.imageElement.naturalHeight,
            });
        });
        this.imageSrc = imageSrc;
        this.targetWidth = targetWidth || 1;
        this.targetHeight = targetHeight || 1;
        this.onCrop = onCrop;
        this.metadata = metadata;
        this.aspectRatio = this.targetWidth / this.targetHeight;
        this.isDragging = false;
        this.isResizing = false;
        this.resizeHandle = null;
        this.startX = 0;
        this.startY = 0;
        this.cropBox = {
            x: 0,
            y: 0,
            width: 200,
            height: 200 / this.aspectRatio,
        };
    }
    connectedCallback() {
        __classPrivateFieldGet(this, _EdenImageCropper_render, "f").call(this);
        __classPrivateFieldGet(this, _EdenImageCropper_loadImage, "f").call(this);
    }
    disconnectedCallback() {
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
            this.resizeObserver = null;
        }
        document.removeEventListener("mousemove", __classPrivateFieldGet(this, _EdenImageCropper_onDrag, "f"));
        document.removeEventListener("mouseup", __classPrivateFieldGet(this, _EdenImageCropper_onDragEnd, "f"));
        document.removeEventListener("mousemove", __classPrivateFieldGet(this, _EdenImageCropper_onResize, "f"));
        document.removeEventListener("mouseup", __classPrivateFieldGet(this, _EdenImageCropper_onResizeEnd, "f"));
    }
}
_EdenImageCropper_render = new WeakMap(), _EdenImageCropper_loadImage = new WeakMap(), _EdenImageCropper_setupResizeObserver = new WeakMap(), _EdenImageCropper_handleResize = new WeakMap(), _EdenImageCropper_initializeCropBox = new WeakMap(), _EdenImageCropper_updateCropBox = new WeakMap(), _EdenImageCropper_attachEventListeners = new WeakMap(), _EdenImageCropper_onDragStart = new WeakMap(), _EdenImageCropper_onDrag = new WeakMap(), _EdenImageCropper_onDragEnd = new WeakMap(), _EdenImageCropper_onResizeStart = new WeakMap(), _EdenImageCropper_onResize = new WeakMap(), _EdenImageCropper_onResizeEnd = new WeakMap(), _EdenImageCropper_getCropData = new WeakMap();
export default EdenImageCropper;
if (!customElements.get("eden-image-cropper")) {
    customElements.define("eden-image-cropper", EdenImageCropper);
}
