import './style.css';

const SVG_ID = 'calio-glass-frosted';
const SVG_NS = 'http://www.w3.org/2000/svg';

const setAttributes = (element, attributes) => {
  Object.entries(attributes).forEach(([name, value]) => {
    element.setAttribute(name, value);
  });
};

const appendSvgElement = (parent, name, attributes = {}) => {
  const element = document.createElementNS(SVG_NS, name);
  setAttributes(element, attributes);
  parent.appendChild(element);
  return element;
};

const injectLiquidGlassSvg = () => {
  if (document.getElementById(SVG_ID)) {
    return;
  }

  const svg = document.createElementNS(SVG_NS, 'svg');
  setAttributes(svg, {
    class: 'calio-glass-filter-svg',
    'aria-hidden': 'true',
    focusable: 'false',
    style: 'display:none',
    width: '0',
    height: '0',
    viewBox: '0 0 200 200',
  });

  const filter = appendSvgElement(svg, 'filter', {
    id: SVG_ID,
    x: '0%',
    y: '0%',
    width: '100%',
    height: '100%',
    filterUnits: 'objectBoundingBox',
  });
  appendSvgElement(filter, 'feTurbulence', {
    type: 'fractalNoise',
    baseFrequency: '0.01 0.01',
    numOctaves: '1',
    seed: '5',
    result: 'turbulence',
  });
  const transfer = appendSvgElement(filter, 'feComponentTransfer', { in: 'turbulence', result: 'mapped' });
  appendSvgElement(transfer, 'feFuncR', { type: 'gamma', amplitude: '1', exponent: '10', offset: '0.5' });
  appendSvgElement(transfer, 'feFuncG', { type: 'gamma', amplitude: '0', exponent: '1', offset: '0' });
  appendSvgElement(transfer, 'feFuncB', { type: 'gamma', amplitude: '0', exponent: '1', offset: '0.5' });
  appendSvgElement(filter, 'feGaussianBlur', { in: 'turbulence', stdDeviation: '3', result: 'softMap' });
  const lighting = appendSvgElement(filter, 'feSpecularLighting', {
    in: 'softMap',
    surfaceScale: '5',
    specularConstant: '1',
    specularExponent: '100',
    'lighting-color': 'white',
    result: 'specLight',
  });
  appendSvgElement(lighting, 'fePointLight', { x: '-200', y: '-200', z: '300' });
  appendSvgElement(filter, 'feComposite', {
    in: 'specLight',
    operator: 'arithmetic',
    k1: '0',
    k2: '1',
    k3: '1',
    k4: '0',
    result: 'litImage',
  });
  appendSvgElement(filter, 'feDisplacementMap', {
    in: 'SourceGraphic',
    in2: 'softMap',
    scale: '150',
    xChannelSelector: 'R',
    yChannelSelector: 'G',
  });

  document.body.appendChild(svg);
};

const refreshGlassFilter = (scope = document) => {
  const root = scope && scope.nodeType === 1 ? scope : document;
  if (root.querySelector('.calio-glass-filter-liquid, .calio-glass-type-liquid_glass')) {
    injectLiquidGlassSvg();
  }
};

const bindElementorPreview = () => {
  if (!window.elementorFrontend || !window.elementorFrontend.hooks) {
    return;
  }

  window.elementorFrontend.hooks.addAction('frontend/element_ready/global', ($scope) => {
    const element = $scope && $scope[0] ? $scope[0] : $scope;
    refreshGlassFilter(element || document);
  });
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {
    refreshGlassFilter();
    bindElementorPreview();
  });
} else {
  refreshGlassFilter();
  bindElementorPreview();
}
