import backwalkgeorge from "/backwalkgeorge.jpg";
import georgetoilet from "/georgetoilet.jpg";
import klinefloor from "/klinefloor.jpg";
import klinemirror from "/klinemirror.jpg";
import klineoutside from "/klineoutside.jpg";
import klinetrain from "/klinetrain.jpg";
import sashaklineburrito from "/sashaklineburrito.jpg";
import sashaklinecar from "/sashaklinecar.jpg";
import sunsetkline from "/sunsetkline.jpg";
import georgerasp from "/georgerasp.gif";
import sunsetfourteenth from "/14thstsunrise.gif";
import solderkitty from "/solderkitty.jpg";
import ducklings from "/ducklings.gif";
import fieldnotes from "/fieldnotes.gif";
import lamp from "/lamp.gif";
import ohio from "/ohio.jpg";
import heron from "/heron.jpg";
import flowers from "/flowers.jpg";
import mirror from "/mirror.jpg";

let background = document.getElementById("background")!;

let prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)",
);

let setImages = () => {
  let images: string[] = [];
  if (prefersReducedMotion.matches) {
    images = [
      backwalkgeorge,
      georgetoilet,
      klinefloor,
      klinemirror,
      klineoutside,
      klinetrain,
      sashaklineburrito,
      sashaklinecar,
      sunsetkline,
      // georgerasp,
      // sunsetfourteenth,
      solderkitty,
      // ducklings,
      fieldnotes,
      // lamp,
      ohio,
      heron,
      flowers,
      mirror,
    ];
  } else {
    images = [
      backwalkgeorge,
      georgetoilet,
      klinefloor,
      klinemirror,
      klineoutside,
      klinetrain,
      sashaklineburrito,
      sashaklinecar,
      sunsetkline,
      georgerasp,
      sunsetfourteenth,
      solderkitty,
      ducklings,
      fieldnotes,
      lamp,
      ohio,
      heron,
      flowers,
      mirror,
    ];
  }
  const randn_bm = (mean = 0, stdev = 0.4) => {
    const u = 1 - Math.random();
    const v = Math.random();
    const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
    return z * stdev + mean;
  };

  const randNums = (count: number, minDistance: number): number[] => {
    const numbers: number[] = [];

    function isFarEnough(num: number): boolean {
      for (const n of numbers) {
        if (Math.abs(num - n) < minDistance) {
          return false;
        }
      }
      return true;
    }

    while (numbers.length < count) {
      const newNumber = randn_bm();
      if (isFarEnough(newNumber)) {
        numbers.push(newNumber);
      }
    }

    return numbers;
  };

  const lefts = randNums(images.length, 0.05);
  const tops = randNums(images.length, 0.05);
  for (let index in images) {
    let img = document.createElement("img");
    img.setAttribute("src", images[index]);
    // let left = randn_bm();
    // let top = randn_bm();
    let left = lefts[index];
    let top = tops[index];
    let z = (Math.abs(left) + Math.abs(top)) / 2;
    let range = { x: window.innerWidth * 0.7, y: window.innerHeight * 0.7 };
    img.style.setProperty(
      "left",
      `${left * range.x + window.innerWidth / 2}px`,
    );
    img.style.setProperty("top", `${top * range.y + window.innerHeight / 2}px`);
    img.style.setProperty("--translate-z", `${z * 3000}px`);
    img.setAttribute("data-group", `${Math.floor(Math.random() * 3)}`);
    background.append(img);
  }
};

const root = document.documentElement;

const onMove = (ev: MouseEvent) => {
  let rotateY = `${(ev.clientX - window.innerWidth / 2) * 0.001}deg`;
  let rotateX = `${(ev.clientY - window.innerHeight / 2) * 0.001}deg`;
  root.style.setProperty("--rotate-x", rotateX);
  root.style.setProperty("--rotate-y", rotateY);
};

document.addEventListener("mousemove", onMove);

setImages();