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

async function setup() {
  createCanvas(6 * Quadrille.cellLength, 4 * Quadrille.cellLength);
  // Load image
  ps = await loadImage('pola.jpg');
  yellow = color('yellow');
  blue = color('blue');
  red = color('red');
  // Quadrille containing cell functions and other content
  quadrille = createQuadrille([
    ['hi', 100, ps, pulse, 150n, { type:'Fiat', model:'500' }],
    [null, yellow, Symbol('id'), ':)'],
    [[0, 1], blue, true, 255, '😼'],
    [false, red, null, 185, '🐲', pulse]
  ]);
  // Method to determine cell type
  quadrille.cellType = function (row, col) {
    if (this.isImage(row, col)) return `image`;
    if (this.isBigInt(row, col)) return `bigint`;
    if (this.isBoolean(row, col)) return `boolean`;
    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.isSymbol(row, col)) return `symbol`;
    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);
  // Interactive cell details for quadrille
  displayCellDetails(quadrille);
}

function displayCellDetails(quadrille, offsetX = 0) {
  const row = quadrille.mouseRow;
  const col = quadrille.mouseCol;
  if (quadrille.isValid(row, col)) {
    const x = col * Quadrille.cellLength + offsetX + 5;
    const y = row * Quadrille.cellLength + 15;
    fill('magenta');
    const prefix = `cell(${row}, ${col}) ${value.checked() ? 'value' : 'type'}:`;
    const cellInfo = String(
      value.checked()
        ? quadrille.cellValue(row, col)
        : quadrille.cellType(row, col)
    );
    text(`${prefix}\n${cellInfo}`, x, y);
  }
}

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