import { randomInt, randomItemInArray, randomChance } from 'https://unpkg.com/randomness-helpers@0.0.1/dist/index.js';

const svgEl = document.querySelector('svg');
const patternEl =  document.querySelector('.pattern');
const gridEl = document.querySelector('.grid');

const gridWidth = 20;
const gridHeight = 20;
const scale = 50;
const splittingChance = 0.1;
const animationSpeed = 20;
const retryLimit = 30;

let interval;

let failedCount = 0;
let mainPathPoints = [];
let otherPaths = [];

let gridData = buildFreshGrid();

function drawGrid() {
  let gridMarkup = '';
  for(let y = 0; y <= gridHeight; y++) {
    gridMarkup += `
      <line 
        class="grid-line"
        x1="0" 
        x2="${gridWidth * scale}"
        y1="${y * scale}"
        y2="${y * scale}"
      />
    `;
  }
  for(let x = 0; x <= gridWidth; x++) {
    gridMarkup += `
      <line 
        class="grid-line"
        y1="0" 
        y2="${gridHeight * scale}"
        x1="${x * scale}"
        x2="${x * scale}"
      />
    `;
  }
  return gridMarkup;
}

function buildFreshGrid() {
  return new Array(gridHeight).fill().map(
    () => new Array(gridWidth).fill(0)
  );
}

function adjustMazePoint(point) {
  return {
    x: scale / 2 + point.x * scale,
    y: scale / 2 + point.y * scale
  }
}

function buildPathData(points) {
  points = points.map(adjustMazePoint);
  
  const firstPoint = points.shift();

  let commands = [`M ${firstPoint.x}, ${firstPoint.y}`];
  
  points.forEach(point => {
    commands.push(`L ${point.x}, ${point.y}`);
  });
  
  return commands.join(' ');
}

function drawLine(points, className = '') {
  return `
    <path
      class="maze-path ${className}" 
      d="${buildPathData(points)}"
    />
  `;
}

function mainPathStartPoints() {
  const yStart = randomInt(0, gridHeight - 1);
  
  return [
    {
      x: -1, 
      y: yStart
    },
    {
      x: 0, 
      y: yStart
    }
  ]
}

function markPointAsTaken(point, value = 1) {
  gridData[point.y][point.x] = value;
}

function findNextPoint(point) {
  const potentialPoints = [];
  
  if(gridData[point.y - 1]?.[point.x] === 0) {
    potentialPoints.push({
      y: point.y - 1,
      x: point.x
    });
  }
  
  if(gridData[point.y + 1]?.[point.x] === 0) {
    potentialPoints.push({
      y: point.y + 1,
      x: point.x
    });
  }
  
  if(gridData[point.y]?.[point.x - 1] === 0) {
    potentialPoints.push({
      y: point.y,
      x: point.x - 1
    });
  }
  
  if(gridData[point.y]?.[point.x + 1] === 0) {
    potentialPoints.push({
      y: point.y,
      x: point.x + 1
    });
  }
  
  if(potentialPoints.length === 0) {
    return undefined;
  }
  
  return randomItemInArray(potentialPoints);
}

function refreshState() {
  mainPathPoints = mainPathStartPoints();
  gridData = buildFreshGrid();
  markPointAsTaken(mainPathPoints.at(-1));
  otherPaths = [];
  failedCount = 0;
}

function drawLines() {
  let markup = '';
  
  markup += otherPaths.map(drawLine).join('');
  
  markup += drawLine(mainPathPoints, 'main');
  
  patternEl.innerHTML = markup;
}

function buildMainPath() {
  refreshState();
  
  drawLines();
  
  interval = setInterval(() => {
    const nextPoint = findNextPoint(mainPathPoints.at(-1));
  
    if(!nextPoint) {
      if(failedCount > retryLimit) {
        refreshState(); 
      } else {
        failedCount++;
        for(let i = 0; i < failedCount; i++) {
          markPointAsTaken(mainPathPoints.pop(), 0);
        }
      }
    } else {
      mainPathPoints.push(nextPoint);
      markPointAsTaken(nextPoint);
      
      if(nextPoint.x === gridWidth - 1) {
        mainPathPoints.push({
          x: nextPoint.x + 1,
          y: nextPoint.y
        })
        clearInterval(interval);
        
        buildOtherPaths();
      }
    }
    
    drawLines();
  }, animationSpeed);
}

function addMorePaths() {
  gridData.forEach((row, y) => {
    row.forEach((cell, x) => {
      if(cell && randomChance(splittingChance)) {
        otherPaths.push([{
          y,
          x,
        }]);
      }
    })
  })
}

function mazeComplete() { 
  return gridData.flat().every(cell => cell === 1);
}

function buildOtherPaths() {
  interval = setInterval(() => {
    addMorePaths();
  
    otherPaths.forEach((path) => {
      const nextPoint = findNextPoint(path.at(-1));
      
      if(nextPoint) {
        path.push(nextPoint);
        markPointAsTaken(nextPoint);
      }
    });
  
    drawLines();
  
    if(mazeComplete()) {
      clearInterval(interval);
      console.log('maze done');
    }
  }, animationSpeed);
}

function draw() { 
  
  gridEl.innerHTML = drawGrid();
  
  const mazeWidth = gridWidth * scale;
  const mazeHeight = gridHeight * scale;
  svgEl.setAttribute('viewBox', `0 0 ${mazeWidth} ${mazeHeight}`);
  svgEl.setAttribute('width', mazeWidth);
  svgEl.setAttribute('height', mazeHeight);
  
  patternEl.innerHTML = '';
  
  clearInterval(interval);
  buildMainPath();
}

draw();

document.querySelector('.randomize').addEventListener('click', draw);