let audioContext = new (window.AudioContext || window.webkitAudioContext)();

let gridSize = 4;
let nextSize = 4;
let wonCurrent = false;
let currentNono = [[]];
let vClues = [[]];
let hClues = [[]];
let muted = false;
let markAsActive = true;

const generateNono = () => {
  let nextNono = [];
  for (let x = 0; x < gridSize; x++) {
    const newRow = [];
    for (let y = 0; y < gridSize; y++) {
      newRow.push({ value: Math.random() > 0.5 ? 1 : 0, guess: 0 });
    }
    nextNono.push(newRow);
  }
  currentNono = nextNono;
  populateClues();
};

const getNonogramClueFromArray = (arr) => {
  let clues = [],
    count = 0;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 1) {
      count++;
    } else if (count > 0) {
      clues.push(count);
      count = 0;
    }
  }
  //make sure we add final clue
  if (count > 0) {
    clues.push(count);
  }

  return clues;
};

//returns the clues given a col index
const calculateVerticalClues = (index) => {
  const col = currentNono.reduce((acc, row) => {
    acc.push(row[index].value);

    return acc;
  }, []);
  return getNonogramClueFromArray(col);
};

//returns the clues given a row index
const calculateHorizontalClues = (index) => {
  const row = currentNono[index].map((n) => n.value);
  return getNonogramClueFromArray(row);
};

const populateClues = () => {
  hClues = [];
  vClues = [];
  for (let n = 0; n < gridSize; n++) {
    hClues.push(calculateHorizontalClues(n));
    vClues.push(calculateVerticalClues(n));
  }
};

//builds a th element with given clues
const constructClueHeader = (clues) => {
  const header = document.createElement("th");
  const wrapper = document.createElement("div");
  wrapper.classList.add("clues");
  clues.forEach((clue) => {
    const clueElement = document.createElement("p");
    clueElement.innerText = clue;
    wrapper.append(clueElement);
  });
  header.append(wrapper);
  return header;
};

const getCellClickHandler = (row, col) => {
  return async (event) => {
    if (!wonCurrent) {
      if (markAsActive) {
        if (!event.target.classList.contains("rejected")) {
          currentNono[row][col].guess = 1 - currentNono[row][col].guess;
          playSound(currentNono[row][col].guess == 1 ? 600 : 400, 0.1);

          event.target.classList.toggle("toggled");
          if (hasWon()) {
            wonCurrent = true;
            document.getElementById("winState").classList.add("won");
            document.getElementById("winState").innerText = "solved!";
            await getTimeoutPromise(600);
            playVictory();
          }
        }
      } else {
        if (!event.target.classList.contains("toggled")) {
          playSound(500, 0.1);
          event.target.classList.toggle("rejected");
        }
      }
    }
  };
};

const arraysMatch = (a1, a2) => {
  if (a1.length != a2.length) return false;
  for (let n = 0; n < a1; n++) {
    if (a1[n] != a1[n]) return false;
  }
  return true;
};

const hasWon = () => {
  //We need to check the guessed grid satisfies the clues
  for (let n = 0; n < gridSize; n++) {
    //horiziontally
    const row = currentNono[n].map((i) => i.guess);
    const equivRowClue = getNonogramClueFromArray(row);
    if (!arraysMatch(equivRowClue, hClues[n])) {
      return false;
    }
    //vertically
    const col = currentNono.reduce((acc, row) => {
      acc.push(row[n].guess);
      return acc;
    }, []);
    const equivColClue = getNonogramClueFromArray(col);
    if (!arraysMatch(equivColClue, vClues[n])) {
      return false;
    }
  }
  return true;
};

const constructFirstRow = () => {
  const row = document.createElement("tr");
  const switcher = document.createElement("th");
  switcher.innerText = markAsActive ? "O" : "X";
  switcher.id = "switcher";
  switcher.addEventListener("click", () => {
    markAsActive = !markAsActive;
    switcher.classList.toggle("alt");
    switcher.innerText = markAsActive ? "O" : "X";
  });
  row.append(switcher);
  vClues.forEach((clues) => {
    row.append(constructClueHeader(clues));
  });

  return row;
};

const constructRegularRow = (rowIndex) => {
  const row = document.createElement("tr");
  row.append(constructClueHeader(hClues[rowIndex]));
  for (let x = 0; x < gridSize; x++) {
    const cell = document.createElement("td");
    cell.addEventListener("click", getCellClickHandler(rowIndex, x));
    row.append(cell);
  }
  return row;
};

const constructHTMLNono = () => {
  const table = document.createElement("table");
  //Create the firs row (just clues)
  table.append(constructFirstRow());
  for (let y = 0; y < gridSize; y++) {
    table.append(constructRegularRow(y));
  }
  const nono = document.getElementById("nono");
  nono.innerHTML = "";
  nono.append(table);
};

const getTimeoutPromise = (millis) => {
  return new Promise((res) => {
    setTimeout(res, millis);
  });
};

const playSound = (freq, dur = 0.1) => {
  if (muted) return;
  let oscillator = audioContext.createOscillator();
  let gainNode = audioContext.createGain();

  oscillator.type = "sine";
  oscillator.frequency.setValueAtTime(freq || 440, audioContext.currentTime);
  oscillator.connect(gainNode);
  gainNode.gain.value = 0.07;
  gainNode.connect(audioContext.destination);
  oscillator.start();
  oscillator.stop(audioContext.currentTime + dur);
  return getTimeoutPromise(dur * 1000);
};

const playVictory = async () => {
  const C = 261.63,
    E = 329.63,
    G = 392.0,
    C_high = 523.25;
  const duration = 0.14; // Duration for each note in milliseconds
  const pauseDur = 10;
  await playSound(C, duration);
  await getTimeoutPromise(pauseDur);

  await playSound(E, duration);
  await getTimeoutPromise(pauseDur);

  await playSound(G, duration);
  await getTimeoutPromise(pauseDur);

  await playSound(C_high, duration);
  await getTimeoutPromise(pauseDur);

  await playSound(G, duration);
  await getTimeoutPromise(pauseDur);

  await playSound(C_high, duration * 4);
  await getTimeoutPromise(pauseDur);
};

const handleSizeChange = (newVal) => {
  nextSize = newVal;
  document.getElementById("gridSize").innerText = nextSize;
};

const handleGen = () => {
  gridSize = nextSize;
  buildNono();
  wonCurrent = false;
  document.getElementById("winState").classList.remove("won");
  document.getElementById("winState").innerText = "unsolved";
};

const handleMute = (e) => {
  muted = !muted;
  e.innerText = muted ? "unmute" : "mute";
};

const buildNono = () => {
  generateNono();
  constructHTMLNono();
  currentNono.forEach((row) => {
    console.log(row.map((c) => c.value));
  });
};

buildNono();