/**
 * Blynex Image Filter Frontend
 * Applies image filters to blocks on the frontend
 */

(function() {
    'use strict';
    document.addEventListener("DOMContentLoaded", () => {
      document
        .querySelectorAll("[data-blynex-filter]")
        .forEach((block) => {
          try {
            const {
              blur,
              brightness,
              contrast,
              grayscale,
              hueRotate,
              invert,
              saturate,
              sepia,
              opacity,
            } = JSON.parse(
              block.getAttribute("data-blynex-filter") || "{}"
            );

            const filterString = `blur(${blur}px) brightness(${brightness}) contrast(${contrast}) grayscale(${grayscale}) hue-rotate(${hueRotate}deg) invert(${invert}) saturate(${saturate}) sepia(${sepia}) opacity(${opacity})`;

            block.querySelector('img').style.filter = filterString;
            block.querySelector('img').style.opacity = opacity;
          } catch (error) {
            console.error("Invalid wrapper link settings", error);
          }
        });
    });

})();