local desw = 1080;
local desh = 1920;

local bgLeftImage = gfx.CreateSkinImage("gameplay/song_panel/bg_left.png", 0);
local bgRightImage = gfx.CreateSkinImage("gameplay/song_panel/bg_right.png", 0);


local renderOutlinedText = function (x,y, text, outlineWidth)
    gfx.BeginPath();
    gfx.FillColor(0,0,0,255);
    gfx.Text(text, x-outlineWidth, y+outlineWidth);
    gfx.Text(text, x-outlineWidth, y-outlineWidth);
    gfx.Text(text, x+outlineWidth, y+outlineWidth);
    gfx.Text(text, x+outlineWidth, y-outlineWidth);

    gfx.FillColor(255,255,255,255);
    gfx.Text(text, x, y);
end

local tickTransitions = function (deltaTime)
    
end

local render = function (deltaTime, bpm, laneSpeed)
    tickTransitions(deltaTime)

    local y = 210;

    gfx.BeginPath();
    gfx.ImageRect(
        0,
        y,
        884*0.85,
        374*0.85,
        bgLeftImage,
        1,
        0
    );

    gfx.BeginPath();
    gfx.ImageRect(
        200,
        y,
        1016*0.85,
        122*0.85,
        bgRightImage,
        1,
        0
    );
    
    gfx.FontSize(30);
    gfx.TextAlign(gfx.TEXT_ALIGN_LEFT + gfx.TEXT_ALIGN_MIDDLE)
    renderOutlinedText(25,y+247, "BPM", 2);
    renderOutlinedText(25,y+281, "LANE-SPEED", 2);

    local actualLaneSpeed = (bpm*laneSpeed)/100

    gfx.TextAlign(gfx.TEXT_ALIGN_RIGHT + gfx.TEXT_ALIGN_MIDDLE);
    renderOutlinedText(260,y+247, string.format("%.0f", bpm), 2);
    renderOutlinedText(260,y+281, string.format("%.2f", actualLaneSpeed), 2);
end

return {
    render=render
}