<div id="container"><div>

<script src="26b39.js"></script>
<script src="26b41.js"></script>
<script src="26b43.js"></script>
<script src="26b11.js"></script>

<script>
// Define global variables
let lenx = null, leny = null, area = null;

// Instantiate containers, output textarea, and buttons
const cnt = getContainer("container");
const inTxa = createTextarea("text-input");
const outTxa = createTextarea("text-output");
const btnDiv = createDiv("button-container");
const cvBtn = createButton("cv-button", "Clear vars");
const ciBtn = createButton("ci-button", "Clear input");
const coBtn = createButton("co-button", "Clear output");
const deBtn = createButton("de-button", "Default");
const rpBtn = createButton("rp-button", "Read params");
const muBtn = createButton("mu-button", "Calc area");

// Append textarea to container
cnt.append(inTxa);
cnt.append(btnDiv);
cnt.append(outTxa);
btnDiv.append(cvBtn);
btnDiv.append(ciBtn);
btnDiv.append(coBtn);
btnDiv.append(deBtn);
btnDiv.append(rpBtn);
btnDiv.append(muBtn);

// Change elements flex value
changeElementsFlex(
  ["text-input", "3"],
  ["button-container", "3"] , 
  ["text-output", "3"],
);

// Bind consolex output to textarea and set EOL character
consolex.setOutput(outTxa);
consolex.setEOL("");

// Set onclick event to each button
ciBtn.addEventListener("click", () => {
  clearTextarea("text-input");
});
coBtn.addEventListener("click", () => {
  clearTextarea("text-output");
});
deBtn.addEventListener("click", () => {
  inTxa.value = "# params"; 
  inTxa.value += "\n" + "LENX 0.25";
  inTxa.value += "\n" + "LENY 0.40";
});
rpBtn.addEventListener("click", () => {
  let key, line;
  
  key = "LENX";
  lenx = readParamFromTextarea("text-input", key);
  outTxa.value += key + "=" + lenx + "\n";

  key = "LENY";
  leny = readParamFromTextarea("text-input", key);
  outTxa.value += key + "=" + leny + "\n";
});
muBtn.addEventListener("click", () => {
  area = lenx * leny;
  outTxa.value += "AREA=" + area + "\n";  
});
cvBtn.addEventListener("click", () => {
  lenx = null;
  leny = null;
  area = null;
});
</script>

/**
 * 26c11.js
 * Helper functions for butiran-x/26c11 note.
 *
 * Author: Sparisoma Viridi (https://github.com/dudung)
 * Created: 2026-03-03
 *
 * Exports:
 * - readParamFromTextarea(id, key)
 */


/**
 * Reads a parameter from a textarea element that starts with the specified key.
 *
 * @param {string} id - The ID of the textarea element to read from.
 * @param {string} key - The key (first word) identifying the parameter to retrieve.
 * @param {"string" | "int" | "float"} type - The expected parameter type.
 * @returns {string | number} The parameter value parsed according to the specified type.
 *
 * @example
 * const value = readParamFromTextarea("text-input", "KEY", "int");
 */
function readParamFromTextarea(id, key, type="string") {
  /** @type {HTMLTextareaElement|null} */
  const el = document.getElementById(id);
  
  if (!(el instanceof HTMLTextAreaElement)) return null;
  
  const lines = el.value.split("\n");
  let param = null;
  for(l of lines) {
    const cols = l.split(" ");
    if(cols[0] == key) {
      if(type == "int") {
        parseInt(param = cols[1]);
      } else if(type == "float") {
        parseFloat(param = cols[1]);
      } else {
        param = cols[1]
      }
    }
  }
  return param;
}


// marker: 26c11.js
(() => {
  console.log("[marker] 26c11.js loaded");
})();