---
import Clouds from "./background/Clouds.astro";
import Stars from "./background/Stars.astro";
import Moon from "./background/Moon.astro";
import Sun from "./background/Sun.astro";
import { blog } from "@/config";

const date =
  "overrideHour" in blog && typeof blog.overrideHour === "number"
    ? new Date(0, 0, 0, blog.overrideHour)
    : new Date(
        Astro.cookies.get("timezone")?.value ??
          Astro.request.headers.get("Date") ??
          Astro.request.headers.get("date") ?? // idk if it cares about capitals so Both
          Date.now(),
      );

const accurateHours =
  date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 60 ** 2;
const daytime = accurateHours > 6 && accurateHours < 18;
---

<style is:inline>
  @keyframes scroll {
    from {
      translate: 0 0;
    }

    to {
      translate: 0 calc(var(--parallax-speed, 70) * -1lvh);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-parallax] {
      animation: 1ms alternate linear scroll;
      animation-timeline: scroll();
    }
  }
</style>

<style>
  #background {
    width: 100lvw;
    height: 100lvh;

    position: fixed;
    top: 0;
    left: 0;

    z-index: -1;
    overflow: clip;

    /* time styling */
    &[data-time="day"] {
      background-color: var(--palette-sky-day);
    }

    &[data-time="night"] {
      background-color: var(--palette-sky-night);
    }
  }
</style>

<div
  id="background"
  data-time={daytime ? "day" : "night"}
  style={`--palette-sky-day:    ${blog.palette.environment.sky.day};
          --palette-sky-night:  ${blog.palette.environment.sky.night};
          --palette-sun:    ${blog.palette.environment.sun};
          --palette-moon:   ${blog.palette.environment.moon};
          --palette-cloud:  ${blog.palette.environment.clouds};
          --palette-star:   ${blog.palette.environment.stars}`}
  aria-hidden="true"
>
  {
    daytime ? (
      <>
        <Sun percent={(accurateHours - 6) / 12} />
        <Clouds />
      </>
    ) : (
      <>
        <Moon />
        <Stars />
      </>
    )
  }
</div>