import { SVG, Color } from "https://cdn.skypack.dev/@svgdotjs/svg.js@3.1.1";
import { random } from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.37";
import tinycolor from "https://cdn.skypack.dev/tinycolor2@1.4.2";
import gsap from "https://cdn.skypack.dev/gsap@3.9.1";
import "https://cdn.skypack.dev/@svgdotjs/svg.filter.js@3.0.8";

let draw, colors, colorPalette, moonSize;
let images = [];

const backgroundTexture = "https://assets.codepen.io/1385231/goldpaper.jpg";
const moonTexture = "https://assets.codepen.io/1385231/moonpaper2.jpg";
const textures = [
  "https://assets.codepen.io/1385231/bluepaper.jpg",
  "https://assets.codepen.io/1385231/whitepaper.jpg",
  "https://assets.codepen.io/1385231/graypaper.jpg",
  "https://assets.codepen.io/1385231/plasterpaper.jpg"
];

function makePyramid(index) {
  const group = draw.group().addClass(`pyramid-group pyramid-group-${index}`);

  const mask = draw.rect(100, 100).fill("#fff");
  group.maskWith(mask);

  let baseCenter, scale;

  if (index === 0) {
    baseCenter = 85;
    scale = 1.5;
  } else if (index === 1) {
    baseCenter = 12;
    scale = 1.9;
  } else if (index === 2) {
    baseCenter = 50;
    scale = 1;
  }

  // make base points
  const baseA = random(baseCenter - 50 / scale, baseCenter - 30 / scale, true);
  const baseB = random(baseCenter - 20 / scale, baseCenter + 20 / scale, true);
  const baseC = random(baseCenter + 30 / scale, baseCenter + 50 / scale, true);

  // pick top point
  const peakX = random(baseCenter - 5, baseCenter + 5, true);
  const peakY = random(25, 45, true) * scale;
  const peak = [peakX, peakY];

  // Create Masks
  const leftMask = group
    .polygon(`${baseA},100 ${peak[0]},${peak[1]} ${baseB},100`)
    .fill("#fff");

  const rightMask = group
    .polygon(`${baseB},100 ${peak[0]},${peak[1]} ${baseC},100`)
    .fill("#fff");

  const [textureOne, textureTwo] = getTwoUniqueFromArray(textures);
  const [colorOne, colorTwo] = getTwoUniqueFromArray(colorPalette);

  var leftTexture = group.image(textureOne);
  var rightTexture = group.image(textureTwo);
  leftTexture.maskWith(leftMask);
  rightTexture.maskWith(rightMask);

  // draw right triangle
  const rightTriangle = group
    .polygon(`${baseB},100 ${peak[0]},${peak[1]} ${baseC},100`)
    .fill(colorOne)
    .css("mix-blend-mode", "multiply");

  // draw left triangle
  const leftTriangle = group
    .polygon(`${baseA},100 ${peak[0]},${peak[1]} ${baseB},100`)
    .fill(colorTwo)
    .css("mix-blend-mode", "multiply");

  group.opacity(0.85);
}

function drawBackground() {
  const bgMask = draw.rect(100, 100).attr({ fill: "#777" });
  var bgTexture = draw.image(backgroundTexture).maskWith(bgMask);
  draw
    .rect(100, 100)
    .attr({ fill: colorPalette[0] })
    .css({ "mix-blend-mode": "color" });

  var gradient = draw
    .gradient("linear", function (add) {
      add.stop(0, "#333");
      add.stop(1, "#fff");
    })
    .from(0, 0)
    .to(0, 1);

  draw
    .rect(100, 100)
    .fill(gradient)
    .opacity(0.7)
    .css({ "mix-blend-mode": "overlay" });
}

function drawMoon() {
  const xPos = random(30, 70, true);
  const yPos = random(20, 40, true);
  moonSize = random(40, 60, true);

  const group = draw.group().addClass("moon-group");
  const moon = group
    .circle(moonSize)
    .fill("#fff")
    .center(xPos, yPos)
    .addClass("moon");
  group.circle(moonSize).fill(colorPalette[0]).center(xPos, yPos);

  const moonImage = group
    .image(moonTexture)
    .maskWith(moon)
    .css({ "mix-blend-mode": "multiply" })
    .opacity(1);

  // Second Circle

  const radius = moonSize / 2;
  // const angle = random(0, 360, true);
  // const xOffset = radius * Math.cos(angle);
  // const yOffset = radius * Math.sin(angle);

  const tinyMoonGroup = draw.group().addClass("moon-tiny");

  const tinyMoon = tinyMoonGroup
    .circle(moonSize * 0.6)
    .fill(colorPalette[0])
    .center(xPos - radius, yPos)
    .css({ "mix-blend-mode": "overlay" });

  tinyMoonGroup.circle(1).center(xPos, yPos).fill("none");

  group.add(tinyMoonGroup);

  group.maskWith(draw.rect(100, 100).fill("white"));
}

function generateNewDrawing() {
  colorPalette = random(colors);
  draw.clear();

  drawBackground();
  drawMoon();

  for (let i = 0; i < 3; i++) {
    makePyramid(i);
  }

  const tl = gsap.timeline();
  tl.fromTo(
    ".pyramid-group",
    { y: 10, opacity: 0 },
    { y: 0, opacity: 0.8, stagger: 0.2, duration: 1, ease: "power3.out" }
  );
  tl.fromTo(".moon-group", { opacity: 0 }, { opacity: 1, duration: 1 }, 0.8);

  // Slide Tiny Moon

  const rotation = random(0, 360, true);

  tl.fromTo(
    ".moon-tiny",
    { opacity: 0, rotate: `${rotation}deg`, transformOrigin: "right center" },
    {
      opacity: random(0.5, 0.8),
      rotate: `${rotation + 180}deg`,
      transformOrigin: "right center",
      duration: 2,
      ease: "power3.out"
    },
    1.5
  );
}

async function init() {
  colors = await fetch(
    "https://unpkg.com/nice-color-palettes@3.0.0/100.json"
  ).then((response) => response.json());

  let svg = SVG()
    .addTo(".container")
    .size("100%", "100%")
    .viewbox("0,0,100,100");
  draw = svg.group();
  draw.maskWith(svg.rect(100, 100).fill("white"));

  generateNewDrawing();
}

function getTwoUniqueFromArray(arr) {
  let indexOne = random(0, arr.length - 1, true);
  let indexTwo = random(0, arr.length - 1, true);
  if (indexOne === indexTwo) {
    indexTwo = indexOne === arr.length - 1 ? 0 : indexOne + 1;
  }

  return [arr[indexOne], arr[indexTwo]];
}

init();

document.querySelector(".button").addEventListener("click", generateNewDrawing);