/* global React */
const { useEffect: useBuddyEffect, useState: useBuddyState } = React;

// ============================================
// PIXEL BUDDY — pixel self-portrait character
// Visible on all pages. Reacts on hover.
// ============================================
function PixelBuddy() {
  const [isRetro, setIsRetro] = useBuddyState(() => {
    return document.documentElement.getAttribute("data-retro") === "on";
  });

  useBuddyEffect(() => {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((m) => {
        if (m.attributeName === "data-retro") {
          setIsRetro(document.documentElement.getAttribute("data-retro") === "on");
        }
      });
    });
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-retro"] });
    return () => observer.disconnect();
  }, []);

  const greet = isRetro ? "back to normal mode" : "try retro mode";

  // 16x16 pixel original size assumed
  const px = 3;
  const size = 32 * px;

  return (
    <div
      className="pixel-buddy"
      onClick={() => {
        // Tiny bounce
        const el = document.querySelector(".pixel-buddy");
        if (el) {
          el.animate(
            [
              { transform: "translateY(0) scale(1)" },
              { transform: "translateY(-12px) scale(1.1)" },
              { transform: "translateY(0) scale(1)" },
            ],
            { duration: 400, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" }
          );
        }
        window.dispatchEvent(new CustomEvent("buddy-click"));
      }}
      style={{ width: size, height: size }}
      aria-label="Pixel buddy"
    >
      <img
        className="pixel-buddy-svg"
        src={isRetro ? "images/pixel-buddy-retro.webp" : "images/pixel-buddy.webp"}
        alt="Pixel buddy"
        style={{ width: "100%", height: "100%", objectFit: "contain", imageRendering: "pixelated" }}
      />
      <div className="pixel-buddy-bubble">{greet}</div>
    </div>
  );
}

window.PixelBuddy = PixelBuddy;