---
const { height = "400" } = Astro.props;
---

<div class="bg" data-height={height}>
  <slot />
</div>

<script>
  window.onload = () => {
    // because Astro doesn't support defer
    document.querySelectorAll(".bg").forEach((e) => {
      const children = e.children;
      const max = e.clientWidth;
      const height = e.getAttribute("data-height");
      const newChildren = [];
      console.log(e.hasAttribute("data-height"));

      let line = document.createElement("div");
      let currentWidth = 0;
      let i = 0;

      const fn = () => {
        let current = children[i++];
        console.log(current.getBoundingClientRect().width, current.getBoundingClientRect().height);
        let ratio = current.clientWidth / current.clientHeight;
        line.appendChild(current.cloneNode(true));
        currentWidth += ratio * height;
      };

      while (i < children.length) {
        // adding elements
        while (i < children.length && currentWidth <= max) fn();
        if (i < children.length) fn();
        // setting height
        console.log(currentWidth);
        let h = (max * height) / currentWidth;
        console.log(`${h}px`);
        line.style.height = `${h - 1}px`;
        newChildren.push(line);
        if (i < children.length) {
          line = document.createElement("div");
          currentWidth = 0;
        }
      }
      e.replaceChildren(...newChildren);
    });
  };
</script>