let ps; // Image variable
let font; // Custom font
let quadrille;
let yellow, blue, red;
let value; // Checkbox for display toggle

function preload() {
  // Load image and font in preload
  ps = loadImage('/images/pola.jpg');
  font = loadFont('/fonts/noto_sans.ttf');
}

function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength, WEBGL);
  textFont(font);
  yellow = color('yellow');
  blue = color('blue');
  red = color('red');
  
  // Quadrille containing cell functions and other content
  quadrille = createQuadrille([
    ['hi', 100, ps, pulse, null, 0],
    [null, yellow, pulse, ':)'],
    [null, blue, pulse, 255, ':p'],
    [null, red, null, 185, ';)', pulse]
  ]);
  // Method to determine cell type
  quadrille.cellType = function (row, col) {
    if (this.isImage(row, col)) return `image`;
    if (this.isNumber(row, col)) return `number`;
    if (this.isColor(row, col)) return `color`;
    if (this.isFunction(row, col)) return `function`;
    if (this.isObject(row, col)) return `object`;
    if (this.isString(row, col)) return `string`;
    if (this.isArray(row, col)) return `array`;
    if (this.isEmpty(row, col)) return `empty`;
  };
  // Method to determine cell value
  quadrille.cellValue = function (row, col) {
    return this.isFilled(row, col) ? this.read(row, col) : 'null';
  };
  // Create checkbox
  value = createCheckbox('Display Value', false); // Default to false
  value.position(10, height + 10); // Position checkbox
}

function draw() {
  background('black');
  // Draw q1
  drawQuadrille(quadrille, { origin: CORNER });
  // Interactive cell details for quadrille
  displayCellDetails(quadrille);
}

function displayCellDetails(quadrille, offsetX = 0) {
  const row = quadrille.mouseRow;
  const col = quadrille.mouseCol;
  // Check if row and col are within bounds
  if (
    row >= 0 && row < quadrille.height && // Row is within bounds
    col >= 0 && col < quadrille.width    // Column is within bounds
  ) {
    const x = col * Quadrille.cellLength + offsetX - width / 2 + 5;
    const y = row * Quadrille.cellLength - height / 2 + 15;
    fill('magenta');
    const prefix = `cell(${row}, ${col}) ${value.checked() ? 'value' : 'type'}:`;
    const cellString = value.checked()
      ? quadrille.cellValue(row, col)
      : quadrille.cellType(row, col);
    text(`${prefix}\n${cellString}`, x, y);
  }
}

function pulse() {
  background('lime');
  const l = Quadrille.cellLength / 2;
  const radius = map(sin(frameCount * 0.1), -1, 1, 5, l);
  noStroke();
  fill('blue');
  circle(0, 0, radius);
}