---
import type { InferEntrySchema } from "astro:content";
import { Image } from "astro:assets";

import { blog, utils } from "@/config";
import Balloon from "./Balloon.astro";

interface Props {
  id: string;
  data: InferEntrySchema<"blog">;
  layer: number;
}

const { id, data, layer } = Astro.props;

const image = await (async () => {
  if (!data.image) return;
  const img = data.image.match(/.*(?=\.png)/gm);
  if (img === null) return;
  return await import(`../../content/posts/assets/${img[0]}.png`).then(
    (x) => x.default,
  );
})();

const date = (() => {
  const year = data.date.getFullYear() + "";
  const month = data.date.getMonth() + 1 + "";
  const date = data.date.getDate() + "";

  return {
    year: "0".repeat(4 - year.length) + year,
    month: "0".repeat(2 - month.length) + month,
    date: "0".repeat(2 - date.length) + date,
  };
})();

const positions: [number, number] = [Math.random(), Math.random()];
const offsets: [number, number][] = [
  [0, 0],
  [
    Math.random() * blog.post.drift[0] - blog.post.drift[0] / 2,
    Math.random() * 0.5 * blog.post.drift[1] - blog.post.drift[1] / 2,
  ],
  [
    Math.random() * blog.post.drift[0] - blog.post.drift[0] / 2,
    Math.random() * 0.5 * blog.post.drift[1] - blog.post.drift[1] / 2,
  ],
  [
    Math.random() * blog.post.drift[0] - blog.post.drift[0] / 2,
    Math.random() * 0.5 * blog.post.drift[1] - blog.post.drift[1] / 2,
  ],
];
---

<section
  style={`--colour: ${data.colour}; 
          --layer: ${layer}; 

          /* generated */

          ${offsets
            .map(
              (x, i) =>
                `--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}px) * ${positions[0] + x[0]} + ${blog.post.xPadding}px); 
                 --y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}px;`,
            )
            .join("\n")}

          --timing: ${
            blog.post.timing[0] +
            Math.random() * (blog.post.timing[1] - blog.post.timing[0])
          }s;

          /* config */
          
          --width: ${blog.post.width}px;
          --y-gap: ${blog.post.yGap}px;
          `}
>
  {
    // new Array(Math.floor(utils.getRandom(blog.balloons.numBalloons)))
    //   .fill(0)
    //   .map((_, i) => <Balloon id={i} of={this?.length} />)

    (() => {
      const len = Math.round(utils.getRandom(blog.balloons.numBalloons));
      const arr = new Array(len).fill(0);
      return arr.map((_, i) => <Balloon id={i} of={len} />);
    })()
  }
  <Image src={image} alt="" />
  <div>
    <a href={`/blog/${id}/`}>({id}) {data.title}</a>
    <br />
    <time datetime={`${date.year}-${date.month}-${date.date}`}
      >{date.date}-{date.month}-{date.year}</time
    >
  </div>
</section>

<style>
  @property --x-offset-0 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --x-offset-1 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --x-offset-2 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --x-offset-3 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --y-offset-0 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --y-offset-1 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --y-offset-2 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @property --y-offset-3 {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  @keyframes bob {
    0%,
    100% {
      top: var(--y-offset-0);
      left: var(--x-offset-0);
    }

    25% {
      top: var(--y-offset-1);
      left: var(--x-offset-1);
    }

    50% {
      top: var(--y-offset-2);
      left: var(--x-offset-2);
    }

    75% {
      top: var(--y-offset-3);
      left: var(--x-offset-3);
    }
  }

  section {
    width: var(--width);
    padding: 10px;
    margin-bottom: var(--y-gap);

    position: relative;
    z-index: var(--layer);

    /* ::before used so that <Balloon /> can render behind 
       (new stacking context for root, so cant 
       render behind the white unless a before) */
    &::before {
      content: "" / "";
      display: block;
      position: absolute;
      top: -5px;
      left: -5px;
      z-index: -2;

      width: calc(var(--width) + 10px);
      height: calc(100% + 10px);

      background-color: white;
      border: 5px solid var(--colour, dodgerblue);
      border-radius: 25px;

      box-shadow: 0 0 75px var(--box-shadow-colour, #00000080);
    }

    /* default, overridden by reduced motion */
    top: var(--x-offset-0);
    left: var(--y-offset-0);

    @media (prefers-reduced-motion: no-preference) {
      animation: infinite var(--timing) bob;
    }

    &:has(a:focus) {
      animation-play-state: paused;
      --box-shadow-colour: var(--colour);
      & a:focus {
        text-decoration: none;
        outline: none;
      }
    }

    & > img {
      border-radius: 15px;

      width: 300px;
      height: 200px;
      object-fit: cover;
    }
  }
</style>