<!-- Activate me and sign me -->

document.addEventListener('DOMContentLoaded', function() {
  const colorElements = document.querySelectorAll('[data-color]');

  colorElements.forEach(element => {
    const bgValue = getComputedStyle(element).getPropertyValue('--bg').trim();
    const contentWrapper = element.querySelector('[class*="__content-wrapper"]');

    if (!bgValue || bgValue === 'undefined') {
      element.style.display = 'none';
      return;
    }

    if (contentWrapper) {
      const color = new Color(bgValue);
      const hexValue = color.hex();
      const rgbValue = color.rgb().string();
      const hslValue = color.hsl().string();

      const colorInfo = document.createElement('div');
      colorInfo.innerHTML = `
        <p>Hex: ${hexValue}</p>
        <p>RGB: ${rgbValue}</p>
        <p>HSL: ${hslValue}</p>
      `;
      contentWrapper.appendChild(colorInfo);
    }
  });
});

// Simple Color conversion class
class Color {
  constructor(color) {
    this.color = color;
  }

  hex() {
    const rgb = this.rgb().array();
    return '#' + rgb.map(x => {
      const hex = x.toString(16);
      return hex.length === 1 ? '0' + hex : hex;
    }).join('');
  }

  rgb() {
    const div = document.createElement('div');
    div.style.color = this.color;
    document.body.appendChild(div);
    const rgb = window.getComputedStyle(div).color.match(/d+/g).map(Number);
    document.body.removeChild(div);
    return {
      array: () => rgb,
      string: () => `rgb(${rgb.join(', ')})`
    };
  }

  hsl() {
    const rgb = this.rgb().array();
    const r = rgb[0] / 255;
    const g = rgb[1] / 255;
    const b = rgb[2] / 255;
    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;

    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }

    return {
      array: () => [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)],
      string: () => `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`
    };
  }
}