{% extends 'base.html' %}

{% block content %}

<header class="flex h-14 lg:h-[60px] items-center gap-4 border-b bg-gray-100/40 dark:bg-gray-800/40" data-id="29"><a
        class="lg:hidden" data-id="30" href="#"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" class="h-6 w-6" data-id="31" data-darkreader-inline-stroke=""
            style="--darkreader-inline-stroke: currentColor;">
            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
        </svg><span class="sr-only" data-id="32">Home</span></a>
    <div class="w-full flex-1" data-id="33">
        <h1 class="text-4xl font-bold text-gray-800 mb-2">Function</h1>
    </div><a
        class="inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground rounded-full border border-gray-200 w-8 h-8 dark:border-gray-800"
        data-id="40" type="button" id="radix-:r1u:" aria-haspopup="menu" aria-expanded="false" data-state="closed"
        href="{{ url_for('dashboard') }}"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
            stroke-width="1.5" stroke="currentColor" class="w-6 h-6" data-darkreader-inline-stroke=""
            style="--darkreader-inline-stroke: currentColor;">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"></path>
        </svg>
        <span class="sr-only" data-id="42">Toggle user menu</span></a>
</header>
<h5 class="text-xl md:text-2xl lg:text-3xl font-semibold text-gray-700 mb-4">Create your own JavaScript HTTP & Timer
    handlers</h5>

<p class="text-base md:text-lg text-gray-600 leading-relaxed mb-6">
    This tool allows you to write and execute JavaScript code for HTTP and timer-based functions. Utilize the on-page
    code editor to develop and modify your scripts. Once executed, view the responses and logs immediately, providing
    direct insight into the behavior and output of your handlers.
</p>


<div class="flex space-x-2 p-2 border-b border-gray-200 dark:border-gray-800">
    <button
        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
        id="executeBtn">
        <span class="sr-only" data-id="4">Bold</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z">
            </path>
        </svg>
    </button>
    <button
        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
        data-id="21" id="clearBtn"><span class="sr-only" data-id="22">Bulleted List</span>
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>

    </button><button
        class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-gray-600 dark:text-gray-400"
        data-id="24"><span class="sr-only" data-id="25">Add Link</span><svg xmlns="http://www.w3.org/2000/svg"
            width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" data-id="26" data-darkreader-inline-stroke=""
            style="--darkreader-inline-stroke: currentColor;">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
        </svg></button>
</div>

<div id="editor" class="relative rounded-lg shadow-lg p-4 mb-4">{{ script }}
</div>


<div id="output">
    <!-- Execution results will appear here -->
</div>


<script>
    var editor = ace.edit("editor");
    editor.setOptions({
        maxLines: editor.session.getLength()
    });
    editor.setTheme("ace/theme/github_dark");
    editor.session.setMode("ace/mode/javascript");

    editor.session.$worker.send("changeOptions", [{ asi: true }]);


    document.getElementById('executeBtn').addEventListener('click', function () {
        try {
            // Get the code from the editor
            var code = editor.getValue();

            // Define the request object (modify as needed)
            var requestObject = {
                // Your request object properties here
            };

            // Send the code and request object to the server
            fetch('/execute?playground=true', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ code: code, request: requestObject }),
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.text();
                })
                .then(text => {
                    try {
                        const data = JSON.parse(text); // Try to parse the response as JSON

                        const output_el = document.querySelector('#output')
                        let output_html = `
                        <div class="relative rounded-lg shadow-lg p-4">
                            ${data.result.body}
                        </div>
                        `;
                        if (data?.logs?.length > 0) {
                            output_html += `
                            <aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-4" data-id="1">
                                <div class="flex justify-between items-center" data-id="2">
                                <div class="flex space-x-2 text-red-500" data-id="3">
                                <div class="w-3 h-3 rounded-full bg-red-500" data-id="4"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500" data-id="5"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500" data-id="6"></div>
                            </div>
                            <p class="text-sm" data-id="7">logs</p>
                            </div>
                            <div class="mt-4" data-id="8" id="response-logs">
                                ${data.logs.map(log => `<p class="text-white" data-id="11">${log}</p>`).join('\n')}
                            </div>
                                </aside>
                            `
                        }

                        output_el.innerHTML = output_html;
                    } catch (err) {
                        document.getElementById('output').innerHTML = data;
                    }
                })
                .catch(error => {
                    document.getElementById('output').textContent = 'Error: ' + error.message;
                });

        } catch (e) {
            document.getElementById('output').innerHTML = 'Error: ' + e.message;
        }
    });

    document.querySelector('#clearBtn').addEventListener('click', function () {
        editor.setValue(`async (req) => {
    return HtmlResponse('<h1 style="font-size: 50px;">Hello World!</h1>')
}`);
        document.querySelector('#output').innerHTML = '';
    });
</script>


{% endblock %}