import React from "https://cdn.skypack.dev/[email protected]";
import ReactDOM from "https://cdn.skypack.dev/[email protected]";
import gsap from "https://cdn.skypack.dev/[email protected]";

const ROOT_NODE = document.querySelector("#app");

const COLORS = {
  BLACK: "hsl(150, 13%, 3%)",
  WHITE: "hsl(105, 17%, 95%)",
  YELLOW: "hsl(51, 94%, 57%)",
  BLUE: "hsl(211, 87%, 34%)",
  RED: "hsl(354, 100%, 42%)"
};

const GENERATE_BLOCKS = (NUMBER) =>
  new Array(NUMBER).fill().map(() => ({
    columns: gsap.utils.random(1, 3, 1),
    rows: gsap.utils.random(1, 3, 1),
    bg: [COLORS.RED, COLORS.BLUE, COLORS.YELLOW][gsap.utils.random(0, 2, 1)]
  }));

const Mondrian = () => {
  const containerRef = React.useRef(null);
  const blocksRef = React.useRef(null);
  const lookupRef = React.useRef(null);
  const spinRef = React.useRef(null);
  const [round, setRound] = React.useState(1);
  const [blocks, setBlocks] = React.useState(GENERATE_BLOCKS(10));

  React.useEffect(() => {
    gsap.to(".scene", {
      "--ry": 360,
      duration: 20,
      ease: "none",
      repeat: -1
    });
  }, []);

  React.useEffect(() => {
    if (blocksRef.current && blocksRef.current.children.length) {
      const BOUNDS = lookupRef.current.getBoundingClientRect();
      const REF_BLOCKS = lookupRef.current.querySelectorAll('.mondrian__block')
      const BLOCKS = blocksRef.current.querySelectorAll(".mondrian__block");
      const TL = gsap.timeline();
      const VMIN = Math.min(window.innerHeight, window.innerWidth) / 100;
      REF_BLOCKS.forEach((BLOCK, index) => {
        const { top, right, bottom, left } = BLOCK.getBoundingClientRect();
        const outRight = left < BOUNDS.left;
        const outLeft = right > BOUNDS.right;
        const outTop = top < BOUNDS.top;
        const outBottom = bottom > BOUNDS.bottom;
        const outOfBounds = outLeft || outRight || outTop || outBottom;
        console.info({ outOfBounds })
        gsap.set(BLOCKS[index], {
          opacity: outOfBounds ? 0 : 1,
          attr: {
            "data-live": outOfBounds ? "false" : "true"
          },
          z: Math.random() > 0.5 ? -10 * VMIN : 10 * VMIN
        });

        if (!outOfBounds)
          TL.add(
            gsap
              .timeline()

              .fromTo(
                BLOCKS[index],
                {
                  yPercent: "+=1000"
                },
                {
                  yPercent: 0,
                  ease: "power1.inOut"
                }
              )
              .to(BLOCKS[index], { z: 0 }),
            index * 0.1
          );
      });
    }
  }, [blocks]);

  const generate = () => {
    if (!blocksRef.current) return
    gsap.to(blocksRef.current.querySelectorAll('[data-live="true"]'), {
      yPercent: "-=1000",
      stagger: 0.1,
      ease: "power1.inOut",
      onComplete: () => {
        setRound(round + 1)
        setBlocks(GENERATE_BLOCKS(10));
      }
    });
  };

  React.useEffect(() => {
    window.addEventListener("click", generate);
    return () => {
      window.removeEventListener("click", generate);
    };
  }, []);

  return (
    <>
      <h1>Tap!</h1>
      {/* Dummy version for detection */}
      <div className="mondrian mondrian-ref" ref={lookupRef} key={new Date().getTime()}>
        {blocks.map((block, index) => (
          <div
            key={`${round}-${new Date().getTime()}-${index}`}
            className="mondrian__block"
            style={{
              "--columns": block.columns,
                "--rows": block.rows,
                  "--bg": block.bg
            }}
            >
          </div>
        ))}
      </div>
      <div className="scene">
        <div className="mondrian__frame" ref={containerRef}>
          <div className="cuboid">
            <div className="cuboid__side"></div>
            <div className="cuboid__side"></div>
            <div className="cuboid__side"></div>
            <div className="cuboid__side"></div>
            <div className="cuboid__side"></div>
            <div className="cuboid__side"></div>
          </div>
        </div>
        <div className="mondrian" ref={blocksRef} key={new Date().getTime()}>
          {blocks.map((block, index) => (
            <div
              key={`${round}-${new Date().getTime()}-${index}`}
              className="mondrian__block"
              style={{
                "--columns": block.columns,
                "--rows": block.rows,
                "--bg": block.bg
              }}
            >
              <div className="cuboid">
                <div className="cuboid__side"></div>
                <div className="cuboid__side"></div>
                <div className="cuboid__side"></div>
                <div className="cuboid__side"></div>
                <div className="cuboid__side"></div>
                <div className="cuboid__side"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

ReactDOM.render(<Mondrian />, ROOT_NODE);