export class ImageCompareSlider {
    constructor(container) {
        this.isActive = false;
        this.container = container;
        this.slider = container.querySelector(".image__compare--slider");
        this.overlay = container.querySelector(".image__compare--overlay");
        this.baseImage = container.querySelector("img.image__compare--image:not(.image__compare--overlay)");
        if (!this.container ||
            !this.slider ||
            !this.overlay ||
            !this.baseImage) {
            console.warn(`ImageCompareSlider skipped: required elements not found in`, container);
            return;
        }
        this.checkAndInject(this.baseImage);
        this.checkAndInject(this.overlay);
        this.initEvents();
        this.slideMove(this.container.offsetWidth / 2);
    }
    checkAndInject(image) {
        const side = image.dataset.darkSide;
        if (!side)
            return;
        const inject = () => {
            this.isImageBright(image)
                .then((isBright) => {
                if (!isBright)
                    return;
                const el = document.createElement("div");
                el.className = `dark--${side}`;
                this.slider.appendChild(el);
                const arrow = this.slider.querySelector(`.arrow--${side}`);
                if (arrow) {
                    arrow.style.borderColor = "var(--color_text_primary)";
                }
            })
                .catch((err) => {
                console.warn("Brightness check failed:", err);
            });
        };
        if (image.complete && image.naturalWidth > 0) {
            inject();
        }
        else {
            image.onload = () => {
                if (image.naturalWidth > 0)
                    inject();
            };
        }
    }
    isImageBright(image) {
        return new Promise((resolve) => {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            if (!ctx)
                return resolve(false);
            canvas.width = image.naturalWidth;
            canvas.height = image.naturalHeight;
            ctx.drawImage(image, 0, 0);
            const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
            let r = 0, g = 0, b = 0, count = 0;
            const step = 4 * 20;
            for (let i = 0; i < data.length; i += step) {
                r += data[i];
                g += data[i + 1];
                b += data[i + 2];
                count++;
            }
            const avg = (r + g + b) / (3 * count);
            resolve(avg > 160);
        });
    }
    initEvents() {
        this.slider.addEventListener("mousedown", () => (this.isActive = true));
        window.addEventListener("mouseup", () => (this.isActive = false));
        window.addEventListener("mousemove", (e) => {
            if (this.isActive)
                this.slideMove(e.clientX);
        });
        this.slider.addEventListener("touchstart", () => (this.isActive = true));
        window.addEventListener("touchend", () => (this.isActive = false));
        window.addEventListener("touchmove", (e) => {
            if (this.isActive)
                this.slideMove(e.touches[0].clientX);
        });
    }
    slideMove(x) {
        const bounds = this.container.getBoundingClientRect();
        let pos = x - bounds.left;
        pos = Math.max(0, Math.min(pos, bounds.width));
        this.overlay.style.width = `${pos}px`;
        this.slider.style.left = `${pos}px`;
    }
    static initAll(selector = ".image__compare") {
        const containers = document.querySelectorAll(selector);
        containers.forEach((container) => {
            new ImageCompareSlider(container);
        });
    }
}
//# sourceMappingURL=ImageCompareSlider.js.map