import gsap from "https://cdn.skypack.dev/gsap@3.11.0"

console.clear()

const NUMBER_OF_CELLS = 24

const CANVAS = document.querySelector('canvas')
const CONTEXT = CANVAS.getContext('2d')
const RATIO = window.devicePixelRatio || 1

CANVAS.width = CANVAS.offsetWidth * RATIO
CANVAS.height = CANVAS.offsetHeight * RATIO

const CELL_SIZE = CANVAS.width / NUMBER_OF_CELLS
const CELL_BORDER = CELL_SIZE * 0.1

const CELL_MAP = []
const CELLS = []
const NUMBER_OF_TRAILS = NUMBER_OF_CELLS * 0.5

for (let t = 0; t < NUMBER_OF_TRAILS; t++) {
  // In here generate the trails starting at x which will be the half way point?
  // Given the trail number, you can work out the length of a side, etc.
  const side = NUMBER_OF_CELLS - t * 2
  const total = side * 4 - 4
  const TRAIL_CELLS = []
  const START = {
    x: NUMBER_OF_CELLS * 0.5,
    y: t,
  }
  const LIMIT = {
    x: [t, NUMBER_OF_CELLS - t],
    y: [t, NUMBER_OF_CELLS - t],
  }
  // console.info({ t, side, START, total })
  let x = NUMBER_OF_CELLS * 0.5
  let y = t
  for (let c = 0; c < total; c++) {
    TRAIL_CELLS.push({
      index: c,
      x,
      y,
      scale: 0,
      trail: t,
    })

    const TOP_SIDE = side * 0.5 - 1
    const RIGHT_SIDE = TOP_SIDE + (side - 1)
    const BOTTOM_SIDE = RIGHT_SIDE + (side - 1)
    const LEFT_SIDE = BOTTOM_SIDE + (side - 1)

    if (c < TOP_SIDE) {
      x += 1
    } else if (c >= TOP_SIDE && c < RIGHT_SIDE) {
      y += 1
    } else if (c >= RIGHT_SIDE && c < BOTTOM_SIDE) {
      x -= 1
    } else if (c >= BOTTOM_SIDE && c < LEFT_SIDE) {
      y -= 1
    } else {
      x += 1
    }
  }
  CELLS.push(TRAIL_CELLS)
}
const RENDER_CELLS = [...CELLS[0]]

const TRAIL_TIMELINES = []


let loopTimes = []
let LOOPING_CELLS
const DRAW = () => {
  CONTEXT.clearRect(0, 0, CANVAS.width, CANVAS.height)
  for (const CELL of RENDER_CELLS) {
    const HUE = (360 / (NUMBER_OF_CELLS * 0.5)) * CELL.trail
    CONTEXT.fillStyle = `hsl(${HUE} 80% 50%)`
    CONTEXT.fillRect(
      CELL.x * CELL_SIZE +
        CELL_BORDER +
        (CELL_SIZE - CELL_SIZE * CELL.scale) * 0.5,
      CELL.y * CELL_SIZE +
        CELL_BORDER +
        (CELL_SIZE - CELL_SIZE * CELL.scale) * 0.5,
      (CELL_SIZE - CELL_BORDER * 2) * CELL.scale,
      (CELL_SIZE - CELL_BORDER * 2) * CELL.scale
    )
  }
}

const MAIN = gsap.timeline()


const CREATE_TRAIL_LOOP = (TRAIL_CELLS) => {
  const TRAIL_TL = gsap.timeline({ paused: true })
  for (let c = 0; c < TRAIL_CELLS.length * 3; c++) {
    const CELL = TRAIL_CELLS[c % TRAIL_CELLS.length]
    if (c === 0) {
      loopTimes.push(TRAIL_TL.totalDuration())
    }
    TRAIL_TL.add(
      gsap
        .timeline()
        .to(CELL, {
          scale: 1,
          duration: 0.1,
        })
        .to(CELL, {
          scale: 0,
          duration: 1.4,
        }),
      c * 0.02
    )
  }
  return TRAIL_TL
}

const TRAIL = CREATE_TRAIL_LOOP(RENDER_CELLS)

const TRAIL_LOOP = gsap.fromTo(
  TRAIL,
  { totalTime: 0 },
  {
    totalTime: 7,
    repeat: -1,
    ease: 'none',
    duration: 6,
  }
)

console.info({ loopTimes })

gsap.ticker.add(DRAW)