<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script>
            /*
             * TODO:
             * - [x] rewrite functions to not use copied functions 
             * - [x] add UI
             * - [x] add style
             * - [x] make everything not look like made at 0:41 on a phone
             */
            function infohashToBase64(infohash) {
                // Converts an hex infohash into base64.

                // Convert hex into an byte array
                let byteArray = infohash.replace(/[^0-9a-fA-F]/g, '')
                    .match(/[0-9a-fA-F]{2}/g);
                for(var i = 0; i<byteArray.length; i++) {
                    byteArray[i] = parseInt(byteArray[i], 16);
                }

                // Convert byteArray into base64
                return btoa(
                    String.fromCharCode.apply(
                        null, new Uint8Array(byteArray)
                    )
                );
            }
            function base64ToInfohash(b64) {
                // Converts a base64 value into a infohash (in a hex form)

                // Convert base64 into an byteArray
                let binaryString = atob(b64);
                let byteArray = new Uint8Array(binaryString.length);
                for (var i = 0; i < binaryString.length; i++) {
                        byteArray[i] = binaryString.charCodeAt(i);
                    }
                // Convert byteArray into hex values 
                return Array.from(byteArray, function(byte) {
                    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
                }).join('');
            }
            
            // Everything for the UI itself

            // Holds the state of tabs.
            // Intended values are "encode" and "decode"
            let tabOpen = "encode"

            function switchTab(name) {
                // Switches the tab
                // only "encode","decode" and "about" values are supported
                let url = new URL(window.location)
                url.searchParams.set("tab", name)
                window.history.replaceState(null, "", url.href)
                if (name === "encode") {
                    document.getElementById("encode").style.display = "block"
                    document.getElementById("decode").style.display = "none"
                    document.getElementById("about").style.display = "none"
                } else if (name === "decode") {
                    document.getElementById("encode").style.display = "none"
                    document.getElementById("decode").style.display = "block"
                    document.getElementById("about").style.display = "none"
                } else if (name === "about") {
                    document.getElementById("encode").style.display = "none"
                    document.getElementById("decode").style.display = "none"
                    document.getElementById("about").style.display = "block"

                }
            }

            addEventListener("DOMContentLoaded", (event) => {
                // Get the current query params
                const urlParams = new URLSearchParams(window.location.search);
                if (
                    urlParams.has("tab") && 
                    ["encode", "decode", "about"].includes(urlParams.get("tab"))
                ) {
                    // Check if tab parameter is set up and is correct
                    // If not, an default value will be used
                    tabOpen = urlParams.get("tab")
                }
                switchTab(tabOpen)
                
                document.getElementsByClassName("tabBar")[0].style.display = "flex"
                // Show the result of the action performed before reloading
                if (urlParams.get("tab") === "encode" && urlParams.has("infohashv1")) {
                    document.getElementById("encodeResult").innerText = infohashToBase64(urlParams.get("infohashv1"))
                } else if (urlParams.get("tab") === "decode" && urlParams.has("base64value")) {
                    document.getElementById("decodeResult").innerText = base64ToInfohash(urlParams.get("base64value"))
                }
            });
        </script>
        <style>
            body {
                width: 100vw; height: 100vh; 
                margin: 0; padding: 0;
                display: flex; flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: #10101a;
                color: white;
                font-family: monospace;
            }
            main {
                background-color: #202025;
                padding: 1em;
                border: 1px solid white;
                border-radius: 1em;
                box-shadow: 0px 5px 15px black, 0px 1px 15px black inset;

            }
            input {
                color: white;
                background-color: transparent;
                border: 1px solid white;
            }
            label {
                margin-right: 0.5rem;
            }
            .tab {
                border: 1px solid white;
                padding: 1em;
                border-radius: 0em 1em 1em 1em;
                box-shadow: 0px 5px 15px black, 0px 1px 15px black inset;
            }
            .result:empty { display: none;}
            .result {
                background-color: rgba(32, 32, 42, 0.5);
                margin-top: 1em;
                padding: 0.5rem;
                border: 1px solid gray;
                border-radius: 1em;
            }
            .tab, .tabBar {
                display: none; /* Default value to keep tabs hidden when JS is not available */
            }
            .button {
                padding: 0.5em;
                border: 1px solid white;
                border-bottom: none;
                transition: box-shadow 200ms ease;
            }
            .leftButton {
                border-radius: 1em 0em 0em 0em;
            }
            .button:hover {
                box-shadow: 0px 5px 25px black;
            }
            .button:active {
                background-color: rgba(255,255,255, 0.2);
            }
            a { color: cyan; text-decoration: none;}
            #about {
                max-width: 40rem;
            }
        </style>
    </head>
    <body>
        <main>
            <h1>infohash ↔ base64</h1>
            <noscript>
                This tool requires JavaScript to function.
                You can use DevTools in your browser to look at the code (it's intended to be easily readable).
            </noscript>
            <div class="tabBar">
                <div onclick="switchTab('encode')" class="button leftButton">Encode</div>
                <div onclick="switchTab('decode')" class="button">Decode</div>
                <div onclick="switchTab('about')" class="button right">About</div>
            </div>
            <div class="tab" id="encode">
                <form>
                    <h2>Encode</h2>
                    <input type="hidden" name="tab" value="encode" />
                    <label for="infohashv1">infohash v1</label><input type="text" id="infohashv1" name="infohashv1" pattern="[0-9a-f]*" />
                    <input type="submit" method="get" value="convert"/>
                </form>
                <div class="result" id="encodeResult"></div>
            </div>
            <div class="tab" id="decode">
                <form>
                    <h2>Decode</h2>
                    <input type="hidden" name="tab" value="decode" />
                    <label for="base64value">base64 value</label><input type="text" id="base64value" name="base64value" />
                    <input type="submit" method="get" value="convert"/>
                </form>
                <div class="result" id="decodeResult"></div>
            </div>
            <div class="tab" id="about">
                <h2>About</h2>
                <p>
                    This tool was made to work with <a href="https://lemmy.dbzer0.com/post/1009713">an suggestion posted by @toxictenement@lemmy.dbzer0.com</a>
                    by <a href="https://magmaus3.eu.org">magmaus3</a>.
                </p>
                <p>
                    You can check the source code by downloading the page (everything is stored in a single html file),
                    by going to your browser's devtools or on <a href="https://codeberg.org/magmaus3/infohash2base64">Codeberg</a>.
                </p>
            </div>
        </main>
    </body>
</html>