/**
 * Caliph Image Filter Frontend
 *
 * This file handles the frontend functionality for image filters.
 * It processes filter attributes and applies them to images.
 *
 * @package Caliph
 * @since 1.0.0
 */

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

})();