window.onload = () => {
    const socket = io("127.0.0.1:5001");
    let connected = false;

    socket.on("connect", () => {
        console.log("Connected to the server");
        connected = true;
    });
    socket.on("disconnect", () => {
        console.log("Disconnected from the server");
        connected = false;
    });

    const robotIp = "http://127.0.0.1:5001"

    const amplitudeSlider = document.getElementById("amplitude");
    const amplitudeValue = document.getElementById("amplitudeValue");
    const frequencySlider = document.getElementById("frequency");
    const frequencyValue = document.getElementById("frequencyValue");
    const syncSlider = document.getElementById("sync");
    const syncValue = document.getElementById("syncValue");

    const motor_0Synced = document.getElementById("motor_0_synced");
    const motor_1Synced = document.getElementById("motor_1_synced");
    const motor_2Synced = document.getElementById("motor_2_synced");
    const motor_3Synced = document.getElementById("motor_3_synced");
    const motor_4Synced = document.getElementById("motor_4_synced");
    const motor_5Synced = document.getElementById("motor_5_synced");

    const verboseCheckbox = document.getElementById("verbose");

    amplitudeSlider.addEventListener("input", function () {
        amplitudeValue.textContent = amplitudeSlider.value;
    });

    frequencySlider.addEventListener("input", function () {
        frequencyValue.textContent = frequencySlider.value;
    });

    syncSlider.addEventListener("input", function () {
        syncValue.textContent = syncSlider.value;
    });

    let t0 = Date.now();

    const syncStep = () => {
        let t = Date.now() - t0;

        const value = computeSinValue(
            frequencySlider.value,
            amplitudeSlider.value,
            t / 1000
        );

        let goals = {};
        if (motor_0Synced.checked) {
            goals["motor_0"] = value;
        }
        if (motor_1Synced.checked) {
            goals["motor_1"] = value;
        }
        if (motor_2Synced.checked) {
            goals["motor_2"] = value;
        }
        if (motor_3Synced.checked) {
            goals["motor_3"] = value;
        }
        if (motor_4Synced.checked) {
            goals["motor_4"] = value;
        }
        if (motor_5Synced.checked) {
            goals["motor_5"] = value;
        }

        if (verboseCheckbox.checked) {
            console.log("Sending goals:", goals);
        }

        if (Object.keys(goals).length !== 0 && connected) {
            // fetch(`${robotIp}/motor_control`, {
            //         method: "POST",
            //         headers: { "Content-Type": "application/json" },
            //         body: JSON.stringify(goals),
            //     }).catch(err => console.error("Send error:", err));    
            socket.emit("motor_control", goals);
        }
        const syncPeriod = 1000.0 / syncSlider.value;
        setTimeout(syncStep, syncPeriod);
    };
    syncStep();

    // Compute the current sin value at a given frequency
    function computeSinValue(frequency, amplitude, time) {
        return amplitude * Math.sin(2 * Math.PI * frequency * time);
    }

};