<template>
    <div class="max-links">
        <div class="text-box">
            <input
                type="text"
                placeholder="Type some shit 😘🔎"
                class="glass"
                v-model="inputText"
                v-on:keydown="filterKeydown"
                v-on:keyup="filterLinks"
                v-on:keyup.enter="webSearch"
                ref="search"
            />

            <div class="suggestions" v-if="suggestions.length > 0">
                <div
                    class="suggestion"
                    v-for="(suggestion, index) in suggestions"
                    :class="{ active: suggestionIndex == index }"
                >
                    {{ suggestion }}
                </div>
            </div>
        </div>

        <div v-for="column in columns" class="column">
            <h2>{{ column }}</h2>
            <div
                v-for="link in sortedLinks(links, column)"
                v-if="link?.title"
                class="flex-child"
            >
                <a
                    :href="setupUrl(link.url)"
                    class="max-link"
                    target="_blank"
                    v-on:click="linkClick"
                    v-if="link.column == column"
                >
                    <span class="visual-aid">
                        {{ link.emoji }}
                    </span>
                    {{ link?.title }}
                </a>
            </div>
        </div>

        <!-- <div class="lip one"></div> -->

        <span
            v-on:click="clicks++"
            class="small message"
            v-html="generateMessage(2)"
        ></span>
    </div>
</template>

<script setup>
    let seed = ref(0);
    let clicks = ref(0);
    let inputText = ref("");
    let suggestions = ref([]);
    let suggestionIndex = ref(0);
    let autocomplete = ref(["google.com", "gmail.com", "graxday.com"]);
    let columns = ref(["web", "apps", "local", "dumb"]);
    let links = ref([
        {
            column: "local",
            url: "192.168.1.6",
            title: "Tower",
            emoji: "🖥️",
        },
        {
            column: "local",
            url: "192.168.1.242/admin",
            title: "Pi-Hole",
            emoji: "🌌",
        },
        {
            column: "local",
            url: "192.168.1.6:8112",
            title: "Deluge",
            emoji: "💦",
        },
        {
            column: "local",
            url: "192.168.1.164",
            title: "Marvin",
            emoji: "🧪",
        },
        {
            column: "local",
            url: "https://192.168.1.1",
            title: "Router",
            emoji: "📶",
        },

        {
            column: "apps",
            url: "192.168.1.164:9999/admin",
            title: "Blog Editing",
            emoji: "✏️",
        },

        {
            column: "apps",
            url: "www.solidscribe.com",
            title: "Solid Scribe",
            emoji: "🔏",
        },
        {
            column: "web",
            url: "www.wunderground.com/weather/us/az/flagstaff/KAZFLAGS335",
            title: "Weather",
            emoji: "🌦️",
        },

        {
            column: "web",
            url: "https://mail.protonmail.com/u/0/inbox",
            title: "Proton Mail",
            emoji: "📧",
        },
        {
            column: "web",
            url: "www.amazon.com",
            title: "Amazon",
            emoji: "🛒",
        },
        {
            column: "web",
            url: "www.camelcamelcamel.com",
            title: "Camel Camel Camel",
            emoji: "🐫",
        },

        {
            column: "apps",
            url: "spotify.com",
            title: "Spotify",
            emoji: "🎶",
        },
        {
            column: "web",
            url: "butcherbox.com",
            title: "Butcher Box",
            emoji: "📦",
        },
        { column: "web", url: "gmail.com", title: "Gmail", emoji: "✉" },
        {
            column: "apps",
            url: "schwab.com",
            title: "Schwab",
            emoji: "🤑",
        },
        {
            column: "local",
            url: "graxday.com",
            title: "Grax Day",
            emoji: "😘",
        },
        {
            column: "web",
            url: "https://drive.google.com/drive/u/0/folders/10hsNBu0o8at687PLc5mcfDtJkhjDcwk9?ths=true",
            title: "Grax Day Docs",
            emoji: "📄",
        },

        // {'column':'apps','url':'x.maxg.cc/code/?folder=/home/mab/ss', 'title':'Code Server', 'emoji':'🦿'},
        {
            column: "apps",
            url: "pix.maxg.cc/library/import",
            title: "PhotoPrism Import",
            emoji: "📷",
        },

        {
            column: "apps",
            url: "http://git.maxg.cc",
            title: "Gitea",
            emoji: "🍵",
        },
        {
            column: "web",
            url: "https://forum.xda-developers.com/t/rom-13-op7pro-crdroid-v9-0-18-12-2022.4511589/page-12",
            title: "OnePlus7 ISO",
            emoji: "📱",
        },
        {
            column: "local",
            url: "https://localhost:47990/",
            title: "Sunshine",
            emoji: "☀️",
        },

        // dumb
        {
            column: "dumb",
            url: "www.youtube.com",
            title: "Youtube",
            emoji: "📺",
        },
        {
            column: "dumb",
            url: "arstechnica.com",
            title: "ArsTechnica",
            emoji: "📰",
        },
        {
            column: "dumb",
            url: "phoronix.com",
            title: "Phoronix",
            emoji: "📰",
        },

        {
            column: "dumb",
            url: "slashdot.org/",
            title: "Slashdot",
            emoji: "📃",
        },
        {
            column: "dumb",
            url: "imgur.com",
            title: "Imgur",
            emoji: "😺",
        },
        {
            column: "dumb",
            url: "hackaday.com",
            title: "Hack a Day",
            emoji: "☠",
        },
        {
            column: "dumb",
            url: "duckduckgo.com",
            title: "Duck Duck Go",
            emoji: "🦆",
        },
        { column: "dumb", url: "bing.com", title: "Bing", emoji: "🦑" },
        {
            column: "dumb",
            url: "google.com",
            title: "Google",
            emoji: "🐚",
        },
        {
            column: "dumb",
            url: "https://www.etsy.com/shop/PowerfulSpell",
            title: "Powerful Spell",
            emoji: "🧚🏻",
        },
        {
            column: "dumb",
            url: "https://kbd.news/",
            title: "KBD",
            emoji: "⌨️",
        },
        {
            column: "web",
            url: "https://store.epicgames.com/en-US/free-games",
            title: "Free Game!",
            emoji: "🎮",
        },

        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
        { url: "", title: "" },
    ]);

    onMounted(() => {
        // setup autocomplete
        Object.keys(this.links).forEach((key) => {
            const link = this.links[key].url;
            if (link) {
                this.autocomplete.push(link);
            }
        });
        // remove duplicates
        // this.autocomplete = [...new Set(this.autocomplete)]

        this.$nextTick(() => {
            this.$refs.search.focus();
        });
    });

    function sortedLinks(inLinks, category) {
        let sortList = [];
        inLinks.forEach((link) => {
            const lowText = this.inputText.toLowerCase();
            const searchTitle = link.title.toLowerCase().includes(lowText);
            const searchUrl = link.url.toLowerCase().includes(lowText);
            const searchFilter =
                this.inputText == "" || searchTitle || searchUrl;

            if (link.column == category && searchFilter) {
                sortList.push(link);
            }
        });

        return sortList.sort((a, b) => {
            return a.title.localeCompare(b.title);
        });
    }
    function setupIcon(title) {
        title = title.toLowerCase().trim();

        return icons[finalRandomIndex];
    }
    function setupUrl(inUrl) {
        if (inUrl.indexOf("http") === -1) {
            inUrl = "http://" + inUrl;
        }

        return inUrl.trim();
    }
    function filterKeydown(e) {
        if (e.code != "Tab") {
            return;
        }
        if (e.code == "Tab") {
            e.preventDefault();
            this.suggestionIndex++;
            if (this.suggestionIndex > this.suggestions.length - 1) {
                this.suggestionIndex = 0;
            }
        }
        return;
    }
    function filterLinks(e) {
        // if(e.code == 'Escape'){
        // 	e.preventDefault()
        // 	this.suggestions = []
        // 	this.inputText = ''
        // 	return
        // }
        // if(e.code == 'ArrowUp'){
        // 	e.preventDefault()
        // 	this.suggestionIndex--
        // 	if(this.suggestionIndex <= -1){
        // 		this.suggestionIndex = this.suggestions.length -1
        // 	}
        // 	return
        // }
        // if(e.code == 'ArrowDown'){
        // 	e.preventDefault()
        // 	this.suggestionIndex++
        // 	if(this.suggestionIndex > this.suggestions.length-1){
        // 		this.suggestionIndex = 0
        // 	}
        // 	return
        // }
        if (e.code == "Tab" || e.code == "Enter") {
            e.preventDefault();
            return;
        }

        this.suggestionIndex = -1;
        this.suggestions = [];

        const searchString = String(e.target.value)
            .trim()
            .toLowerCase()
            .replace("www.", "");

        if (searchString.length < 2) {
            return;
        }

        this.autocomplete.forEach((entry) => {
            const test = entry.toLowerCase().indexOf(searchString);
            if (test >= 0) {
                this.suggestions.push(entry);
            }
        });

        this.suggestions = this.suggestions.splice(0, 2);
    }
    function webSearch(e) {
        // go to suggestion
        if (this.suggestions.length >= 1) {
            window.location.href = `https://${this.suggestions[0]}`;
            return;
        }

        // go straight to URLs
        const urlCheck = String(e.target.value).trim();
        if (urlCheck.indexOf(".") > -1 && urlCheck.indexOf(" ") == -1) {
            let goodUrl = urlCheck.replace("http://", "").replace("www.", "");
            window.location.href = `https://www.${goodUrl}`;
            return;
        }

        // Skip empty strings
        if (e.target.value == "") {
            return;
        }

        // duck duck go search
        let webString = String(e.target.value).replaceAll(" ", "+");
        window.location.href = `https://duckduckgo.com/?hps=1&q=${webString}`;
        return;
    }
    function generateMessage(index) {
        let message = "";
        let m = [];

        var now = new Date();
        var days = [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
        ];
        var months = [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December",
        ];

        var day = days[now.getDay()];
        var month = months[now.getMonth()];

        this.seed =
            parseInt(`${now.getMonth()}${now.getHours()}${now.getDay()}`) +
            this.clicks;

        let weekday =
            day + ", " + month + " " + now.getDate() + "<sup>th</sup>";

        if (index == 1) {
            m = [
                [
                    "Continue",
                    "Keep on",
                    "Don't stop",
                    "Persist",
                    "Never stop",
                    "Without falter keep",
                ],
                [
                    "Slaying",
                    "Rocking",
                    "Fighting",
                    "murdering",
                    "betraying",
                    "stabbing",
                    "killing",
                    "dancing",
                ],
                [weekday],
            ];
        }
        if (index == 2 && this.seed % 2 == 0) {
            m = [
                ["You", "The world", "The universe", "Your life"],
                [
                    "really",
                    "could be",
                    "might be",
                    "certainly",
                    "will turn out to be",
                    "will be",
                ],
                [
                    "tough",
                    "strong",
                    "a champ",
                    "a bitch",
                    "stronger than a bull",
                    "another day",
                    "a fine one",
                    "sick nasty",
                ],
                ["."],
                ["\nAll your"],
                [
                    "exploits",
                    "missions",
                    "endeavors",
                    "journeys",
                    "limbs",
                    "friendships",
                    "meetings",
                    "destinations",
                    "plants",
                    "thoughts",
                    "dreams",
                    "projects",
                ],
                [
                    "will",
                    "could",
                    "may",
                    "certainly will",
                    "are going to",
                    "are about to",
                    "will",
                    "will",
                ],
                [
                    "succeed",
                    "avail",
                    "pass",
                    "make good",
                    "grow famous",
                    "work",
                    "profit",
                    "reap success",
                    "conquer",
                    "avail",
                    "thrive",
                    "flourish",
                    "triumph",
                ],
                ["."],
            ];
        }
        if (index == 2 && this.seed % 2 == 1) {
            m = [
                ["Things", "Stuff", "Its", "Everything"],
                ["are not", "ain't", "is not"],
                ["so", "that"],
                ["bad", "grim", "brutal", "hard", "stuffy", "saddening"],
                [".", ".", ".", ".", ".", ".", ".", "?"],
                ["\nGet", "\nRun", "\nSprint", "\nShamble"],
                ["out there", "in there", "on over", "along now", "on over"],
                ["and"],
                ["seize", "grab", "embrace", "hug", "curb stomp", "smash"],
                ["the", "those", "thine"],
                ["tasty", "special", "spicy", "magical", "wicked", "powerful"],
                [
                    "day",
                    "goals",
                    "missions",
                    "pants",
                    "trees",
                    "dreams",
                    "pants",
                    "goats",
                    "grundus",
                ],
                ["."],
            ];
        }

        m.forEach((part) => {
            // const p = part[Math.floor(Math.random() * part.length)]
            const p = part[this.seed % part.length];
            let space = " ";
            if (p == "." || p == "?") {
                space = "";
            }
            message += space + p;
        });

        return "<span>" + message + "</span>";
    }
    function linkClick() {
        setTimeout(() => {
            console.log("Close a boy");
            window.open("", "_self").close();
        }, 250);
    }
    function onCluck() {
        console.log("hi");
    }
</script>

<style>
    html {
        font-family: Roboto, Helvetica Neue, Arial, Helvetica, sans-serif;
    }
    body {
        background-image: none;

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.25' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
            linear-gradient(
                135deg,
                rgba(0, 0, 0, 0) 1%,
                rgba(0, 8, 70, 0.56) 60%
            ),
            radial-gradient(
                circle at left bottom,
                rgb(179, 0, 193) 0%,
                rgb(0, 0, 0) 50%
            );

        margin: 0;
        padding: 0;
        height: 100vh;
    }

    input {
        width: calc(100% - 20px);
        margin: 0 10px 15px;
        font-size: 1.4em;
        border-radius: 4px;
        outline: none;
        padding: 10px 15px;
        border: none;
        box-sizing: border-box;
    }

    .message {
        display: inline-block;
        width: 100%;
        color: white;
        font-size: 1.5em;
        text-align: center;
        border-bottom: 1px solid white;
        padding: 0 0 5px 0;
        white-space: pre-wrap;
    }
    .large.message {
        padding: 0 0 5px 0;
        font-size: 2em;
        border-bottom: none;
    }
    .small.message {
        padding: 5px 0 15px 0;
        font-size: 1em;
        border-bottom: none;
        text-align: right;
    }

    .center-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
        position: relative;
    }

    .column {
        width: 25%;
        display: inline-block;
    }
    h2 {
        text-align: center;
        color: white;
        text-transform: capitalize;
    }
    .max-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: flex-start;
        align-content: space-evenly;
        width: 100%;
        position: relative;
    }
    .flex-child {
        width: calc(100% - 10px);
        margin: 0 0 10px;
    }
    .glass {
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 4px;
        backdrop-filter: blur(3px);
        border: 2px solid rgba(255, 255, 255, 0.1);
        color: white;
    }
    .max-link {
        display: inline-block;
        box-sizing: border-box;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.25);
        border-radius: 4px;
        width: 100%;
        font-size: 0.8em;
        padding: 10px 10px;
        text-decoration: none;
        color: white;
        word-break: break-word;
        backdrop-filter: blur(2px);
        /*		border: 2px solid rgba(255,255,255,0.1);*/
        font-size: 1.1em;
    }
    .max-link:hover {
        transition: all 0.4s ease-out;
        /*		background-color: #35004d;*/
        backdrop-filter: blur(7px);
    }
    .visual-aid {
        display: inline-block;
        box-sizing: border-box;
        margin: 0 5px 0 0;
    }

    .text-box {
        display: inline-block;
        position: relative;
        width: 100%;
    }
    .suggestions {
        display: inline-block;
        background-color: white;
        position: absolute;
        top: 49px;
        left: 0px;
        right: 0;
        z-index: 2;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        margin: 0 10px 0;
        box-sizing: border-box;
        box-shadow: 0px 4px 3px 0px gray;

        background-color: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(4px);
    }
    .suggestion {
        display: inline-block;
        padding: 10px;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
        color: white;
    }
    .suggestion.active {
        background-color: purple;
        color: white;
    }

    .nose,
    .lip,
    .eye {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.18);
        border-radius: 4px;
        padding: 5px 10px;
        backdrop-filter: blur(3px);
        border: 2px solid rgba(255, 255, 255, 0.1);
    }
    .lip {
        width: calc(100% - 35px);
    }
    .lip.one {
        height: 10px;
    }

    @media only screen and (max-width: 600px) {
        .max-links {
            width: 100%;
        }
    }
    @media only screen and (min-width: 992px) {
        .max-links {
            width: 70%;
        }
    }
</style>
