(()=>{var api = new ModuleApi();
// Configuration with default values
var config = {
    amplitude: 50,
    frequency: 1,
    speed: 1,
    color: '#4287f5',
    lineWidth: 3
};
// Get DOM elements
var container = api.dom();
var canvas = container.querySelector('#sineCanvas');
var ctx = canvas.getContext('2d');
// Animation variables
var animationId;
var startTime = Date.now();
// Initialize the canvas
function initCanvas() {
    var rect = container.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;
}
// Draw the sine wave
function drawSineWave() {
    if (!ctx)
        return;
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Set line style
    ctx.strokeStyle = config.color;
    ctx.lineWidth = config.lineWidth;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    // Draw the wave
    var now = Date.now();
    var elapsed = (now - startTime) / 1000;
    var timeOffset = elapsed * config.speed;
    ctx.beginPath();
    // Start from the left side of the canvas
    var centerY = canvas.height / 2;
    for (var x = 0; x <= canvas.width; x++) {
        // Calculate the y position for each x point along the sine wave
        var xValue = (x / canvas.width) * Math.PI * 2 * config.frequency;
        var sineValue = Math.sin(xValue + timeOffset);
        var y = centerY + sineValue * config.amplitude;
        if (x === 0) {
            ctx.moveTo(x, y);
        }
        else {
            ctx.lineTo(x, y);
        }
    }
    ctx.stroke();
    // Request the next frame
    animationId = requestAnimationFrame(drawSineWave);
}
// Start the animation
function startAnimation() {
    if (animationId) {
        cancelAnimationFrame(animationId);
    }
    startTime = Date.now();
    animationId = requestAnimationFrame(drawSineWave);
}
// Handle window resize
function handleResize() {
    initCanvas();
    drawSineWave();
}
// Setup property listeners
api.onPropertyUpdate('amplitude', function (value) {
    config.amplitude = value;
});
api.onPropertyUpdate('frequency', function (value) {
    config.frequency = value;
});
api.onPropertyUpdate('speed', function (value) {
    config.speed = value;
});
api.onPropertyUpdate('color', function (value) {
    config.color = value;
});
api.onPropertyUpdate('lineWidth', function (value) {
    config.lineWidth = value;
});
// Handle resize events
api.onResize(function () {
    handleResize();
});
// Initialize
window.addEventListener('load', function () {
    initCanvas();
    startAnimation();
});
})();