// Global variables
const MAXC = 20;
const MAXV = 100;

let courbe = new Array(MAXC).fill().map(() => new Array(MAXV).fill(0));
let valmin = new Array(MAXC).fill(0);
let valmax = new Array(MAXC).fill(0);
let nc = 0;

// Drawing modes
const HORIZONTAL = 0;
const VERTICAL = 1;
const SUPERPOSER = 2;

// Drawing types
const LIGNE = 0;
const LIGNE_AXES = 1;
const HISTOGRAMME = 2;

let mode_affichage = HORIZONTAL;
let type_dessin = LIGNE;

// WebGL setup
function initWebGL() {
    const canvas = document.getElementById("glCanvas");
    const gl = canvas.getContext("webgl");

    if (!gl) {
        console.error("Unable to initialize WebGL.");
        return null;
    }

    return gl;
}

// Mapping function
function map(smin, smax, val, omin, omax) {
    const percent = (val - smin) / (smax - smin);
    return (omax - omin) * percent + omin;
}

// Draw axes
function drawAxes(gl, x1, x2, y1, y2) {
    gl.lineWidth(1);
    gl.strokeStyle = "#FF8080";
    gl.beginPath();
    gl.moveTo(x1, y2);
    gl.lineTo(x2, y2);
    gl.lineTo(x2, y1);
    gl.stroke();
}

// Draw curve
function drawCurve(gl, index, hgx, hgy, bdx, bdy) {
    if (index >= nc) {
        console.error("Invalid curve index");
        return;
    }

    gl.strokeStyle = "#FFFFFF";  // Set line color to white

    const size = courbe[index][0];

    gl.beginPath();
    for (let i = 1; i <= size; i++) {
        let posX = map(0, size - 1, i - 1, hgx, bdx);
        let posY = map(valmin[index], valmax[index], courbe[index][i], bdy, hgy);

        if (mode_affichage === VERTICAL) {
            // Swap x and y for vertical mode
            [posX, posY] = [posY, posX];
        }

        if (i === 1) {
            gl.moveTo(posX, posY);
        } else {
            gl.lineTo(posX, posY);
        }
    }
    gl.stroke();
}

// Draw histogram
function drawHistogram(gl, index, hgx, hgy, bdx, bdy) {
    if (index >= nc) {
        console.error("Invalid curve index");
        return;
    }

    gl.fillStyle = "#FFFFFF";  // Set fill color to white

    const size = courbe[index][0];
    for (let i = 1; i <= size; i++) {
        let gauche = map(0, size, i - 1, hgx, bdx);
        let droite = map(0, size, i, hgx, bdx);
        let haut = map(valmin[index], valmax[index], courbe[index][i], bdy, hgy);
        let bas = bdy;

        if (mode_affichage === VERTICAL) {
            [gauche, haut] = [haut, droite];
            [droite, bas] = [bas, gauche];
        }

        gl.fillRect(gauche, haut, droite - gauche, bas - haut);
    }
}

// Display function (main rendering function)
function display(gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    if (mode_affichage === HORIZONTAL) {
        for (let i = 0; i < nc; i++) {
            let haut = map(0, nc, i, 1.0, -1.0);
            let bas = map(0, nc, i + 1, 1.0, -1.0);
            if (type_dessin === LIGNE || type_dessin === LIGNE_AXES) {
                drawCurve(gl, i, -1.0, haut, 1.0, bas);
            } else if (type_dessin === HISTOGRAMME) {
                drawHistogram(gl, i, -1.0, haut, 1.0, bas);
            }
        }
    }
}

// Load the data from file (simulated in JavaScript)
function loadFile() {
    nc = 3;  // Number of curves
    courbe = [
        [5, 0.1, 0.4, 0.7, 0.9, 1.0],  // Example data
        [5, 0.2, 0.3, 0.6, 0.8, 0.95],
        [5, 0.05, 0.15, 0.5, 0.75, 0.85],
    ];
    valmin = [0.1, 0.2, 0.05];
    valmax = [1.0, 0.95, 0.85];
}

// Initialize everything and run
function main() {
    const gl = initWebGL();
    if (!gl) return;

    loadFile();  // Load example data
    display(gl); // Render the curves
}

// Run the WebGL program
window.onload = main;