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 _EdenImagePicker_draw, _EdenImagePicker_openFileManager, _EdenImagePicker_selectImage, _EdenImagePicker_clearImage;
import template from "./eden-image-picker.template.js";
import styles from "./eden-image-picker.styles.js";
import html from "../../services/html.js";
class EdenImagePicker extends HTMLElement {
    constructor() {
        super();
        _EdenImagePicker_draw.set(this, () => {
            this.innerHTML = html `
      <style>
        ${styles}
      </style>
      ${template({
                label: this.label,
                value: this.value,
                helper: this.helper,
            })}
    `;
            const preview = this.querySelector(".image-picker__preview");
            if (preview) {
                preview.src = this.value;
            }
        });
        _EdenImagePicker_openFileManager.set(this, async (e) => {
            const target = e.target;
            if (!target?.closest(".image-picker__field"))
                return;
            const { default: FileManagerModal } = await import("../plugin/file-manager-modal.js");
            new FileManagerModal({
                callback: __classPrivateFieldGet(this, _EdenImagePicker_selectImage, "f"),
                width: this.cropWidth,
                height: this.cropHeight,
            });
        });
        _EdenImagePicker_selectImage.set(this, (url) => {
            this.setAttribute("value", url);
        });
        _EdenImagePicker_clearImage.set(this, (e) => {
            const target = e.target;
            if (!target?.closest(".image-picker__clear"))
                return;
            this.setAttribute("value", "");
        });
        this.name = this.getAttribute("name") || "";
        this.label = this.getAttribute("label") || "";
        this.helper = this.getAttribute("helper");
        this.cropWidth = readDimension(this.getAttribute("width"));
        this.cropHeight = readDimension(this.getAttribute("height"));
        this.value = this.getAttribute("value") || "";
        __classPrivateFieldGet(this, _EdenImagePicker_draw, "f").call(this);
    }
    static get observedAttributes() {
        return ["value"];
    }
    attributeChangedCallback(name, _, newValue) {
        if (name !== "value" || newValue === this.value)
            return;
        this.value = newValue;
        __classPrivateFieldGet(this, _EdenImagePicker_draw, "f").call(this);
    }
    connectedCallback() {
        this.addEventListener("click", __classPrivateFieldGet(this, _EdenImagePicker_clearImage, "f"));
        this.addEventListener("click", __classPrivateFieldGet(this, _EdenImagePicker_openFileManager, "f"));
    }
    disconnectedCallback() {
        this.removeEventListener("click", __classPrivateFieldGet(this, _EdenImagePicker_openFileManager, "f"));
        this.removeEventListener("click", __classPrivateFieldGet(this, _EdenImagePicker_clearImage, "f"));
    }
}
_EdenImagePicker_draw = new WeakMap(), _EdenImagePicker_openFileManager = new WeakMap(), _EdenImagePicker_selectImage = new WeakMap(), _EdenImagePicker_clearImage = new WeakMap();
export default EdenImagePicker;
function readDimension(value) {
    if (!value)
        return;
    const dimension = Number(value);
    return Number.isFinite(dimension) && dimension > 0 ? dimension : undefined;
}
if (!customElements.get("eden-image-picker")) {
    customElements.define("eden-image-picker", EdenImagePicker);
}
