---
import renderBackgroundImage from "../api/renderBackgroundImage.js";
import type { BackgroundImageConfigOptions } from "../types.d";

const content = await Astro.slots.render("default");

declare interface Props
  extends Pick<
    BackgroundImageConfigOptions,
    Exclude<keyof BackgroundImageConfigOptions, "content">
  > {}

const { link, style, htmlElement } = await renderBackgroundImage({
  content,
  ...(Astro.props as Props),
});
---

<Fragment set:html={link + style + htmlElement} />

<script>
  const { classList } = document.documentElement;

  const addClass = classList.add.bind(classList);

  addClass("jpeg");
  addClass("png");

  const isFormatSupported = (format, dataUri) => {
    const image = new Image();

    image.src = `data:image/${format};base64,${dataUri}`;

    image.onload = addClass(format);
  };

  // TODO: Check support for JXL images
  // isFormatSupported("jxl", "/woAEBAJCAQBACwASxLFgoUJEP3D/wA=");

  isFormatSupported("webp", "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==");

  isFormatSupported(
    "avif",
    "AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A="
  );
</script>