---
import Layout from "@layouts/Layout.astro";
import { Icon } from "astro-icon/components";

import splash from "@assets/splash.json";

const genSplash = (): String => {
    const idx = Math.floor(Math.random() * splash.length);
    return splash[idx].splash;
};

const randomSplash = genSplash();

const link = Astro.url.searchParams.get("redir");
---

<Layout>
    <div class="h-full flex items-center justify-center font-inter">
        <div class="flex flex-col items-center gap-6">
            <div class="flex items-center gap-2">
                <Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
                <h1 class="text-6xl font-semibold">Radius</h1>
            </div>
            <div class="flex flex-row items-center gap-2 w-4/5 md:w-[26rem] border border-(--input) rounded-lg h-12 p-2">
                <Icon name="lucide:search" />
                <input id="input" type="text" name="Search" class="text-md md:text-sm focus-visible:outline-none w-full h-full placeholder:text-(--muted-foreground)" id="search" placeholder="Search the web">
            </div>
            <p class="text-sm text-center sm:text-base whitespace-nowrap"> { randomSplash } </p>
            {/** <div class="w-full flex flex-row gap-2">
                <div class="rounded-md border-2">
                    t
                </div>
            </div> */}
        </div>
        <iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden bg-(--background)" />
        <link-element data-link={link} />
    </div>
</Layout>
<script>
    import { SW } from "@utils/proxy.ts";
    import { Settings } from "@utils/settings.ts";
    import { BareClient } from "@mercuryworkshop/bare-mux"; 

    const init = async () => {
        const input = document.getElementById("input") as HTMLInputElement;
        const iframe = document.getElementById("iframe") as HTMLIFrameElement;
        const iframeWin = iframe.contentWindow;
        const bhl = document.getElementById("bhl") as HTMLDivElement;
        const phl = document.getElementById("phl") as HTMLDivElement;
        const phlImage = document.getElementById("phlImage") as HTMLImageElement;
        const phlTitle = document.getElementById("phlTitle") as HTMLDivElement;
        const proxyLeft = document.getElementById("pal") as HTMLButtonElement;
        const proxyRight = document.getElementById("par") as HTMLButtonElement;
        const proxyReload = document.getElementById("prl") as HTMLButtonElement;
        const proxyShortcut = {
            button: document.getElementById("psc") as HTMLButtonElement,
            noShortcut: document.getElementById("noShortcut") as HTMLElement,
            shortcut: document.getElementById("shortcut") as HTMLElement
        }
        const client = new BareClient();
        input.addEventListener("keypress", async (event: any) => {
            if (event.key === "Enter") {
                const sw = SW.getInstance().next().value!;
                const settings = await Settings.getInstance();
                iframe.classList.remove("hidden");
                iframe.src = sw.encodeURL(input.value); 
            }
        });

        const getURL = async (): Promise<string> => {
            if (iframeWin!.__uv) {
                return iframeWin!.__uv.location.href
            }
            else {
                return iframeWin!.location.href
                    .replace(iframeWin!.location.origin, '')
                    .replace(iframeWin!.$scramjet.config.prefix, '')
            }
        }

        const buttons = () => {
            proxyLeft.addEventListener("click", () => {
                iframeWin!.history.back();
            });
            proxyRight.addEventListener("click", () => {
                iframeWin!.history.forward();
            });
            proxyReload.addEventListener("click", () => {
                iframeWin!.location.reload();
            });
            /** proxyShortcut.button.addEventListener("click", () => {
                console.log("yet to be implemented");
            }); */
        }

        iframe.addEventListener("load", async () => {
            phlTitle.innerHTML = iframeWin!.document.title;
            const pageURL = await getURL();
            const data = await client.fetch(`https://www.google.com/s2/favicons?domain=${pageURL}&sz=64`);
            const dataRes = await data.blob();
            const object = URL.createObjectURL(dataRes);
            phlImage.src = object;
            bhl.classList.add("hidden");
            phl.classList.remove("hidden");
            buttons();
        }); 
    }

    class CustomComponent extends HTMLElement {
        connectedCallback() {
            const link = this.dataset.link;
            const input = document.getElementById("input") as HTMLInputElement;
            if (link) {
                return (async () => {
                    await init();
                    try {
                        input.value = atob(link);
                    } catch (_) {
                        input.value = link;
                    }
                    input.dispatchEvent(new KeyboardEvent("keypress", { key: "Enter", code: "Enter" }));
                    history.pushState({}, "", "/");
                })();
            }
        }
    }
    
    customElements.define('link-element', CustomComponent);
    document.addEventListener("astro:page-load", async () => {
        await init();
    });
</script>