@page
@model GumbyModel
@{
    ViewData["Title"] = "Gumby Page";
}

<div class="text-center">
    <h1>Gumby!</h1>
    <img src="assets/gumby1.webp" width="320px" height="240px" alt="Gumby" id="gumby"/>
</div>
<hr/>
<div class="text-center">
    <form method="post" class="align-items-center" id="inputForm1">
        <div class="align-items-center">
            <table class="align-items-center" style="width: 100%">
                <tr>
                    <p>Response from button should be delayed by <span id="delay">a random number of</span> seconds...</p>
                    <td style="width: 20%; padding-left: 40%"><input type="submit" id="btnPress" value="Press Me!" asp-page-handler="Press"/></td>
                    <td style="width: 20%; padding-right: 40%"><input type="submit" id="btnClear" value="Clear" asp-page-handler="Clear"/></td>
                </tr>
            </table>
            <hr/>
            <label id="result"></label>
        </div>
    </form>
</div>

@if (ViewData["Message"] == null)
{
    <script type="text/javascript">
            window.onload = function () {
                document.getElementById("result").innerHTML = "";
            };
        </script>
}

<!-- The point of this script is to emulate an indeterminate response from the server -->
@if (ViewData["Message"] != null)
{
    <script type="text/javascript">
            const viewData = "@ViewData["Message"]"; // imported from controller needs to be wrapped!
            const delay = ms => new Promise(res => setTimeout(res, ms)); //makeshift delay timer
            window.onload = async function () {
                const randTime = Math.random() * 12000; //12 seconds, because playwright is set to 10.
                const displayTime = Math.round((randTime/1000) *100) / 100;
                console.log("Delaying " + displayTime + " seconds");
                document.getElementById("delay").innerHTML = displayTime;
                await delay(randTime); 
                document.getElementById("result").innerHTML = viewData;
            };
        </script>
}