import './App.css'
import {AdvancedBr, SingularOomfie} from './components/comps.tsx'
import {createSignal, onMount} from 'solid-js';
import Reviews from './components/api.tsx';
import Music, {MusicEntry} from './components/music.tsx';
import {Bdpfp, Normalpfp} from './components/pfp.tsx';
import {InfoCard} from './components/middlecard.tsx';

export const [shouldpopup, setpopup] = createSignal(false)
export const [shouldpopupEasterEgg, setpopupEasterEgg] = createSignal(false)
export const [ishover, setishover] = createSignal(false)

let explodcount = 0
const isitmybd = () => new Date().toISOString().slice(5, 10) === '08-22';

function getRandomVivsieWord() {
    const words = [
        "fuck",
        "shit",
        "pussy",
        "penis",
        "dick"
    ]
    return words[Math.floor(Math.random() * words.length)]
}

function vivsiepop() {
    const blep = document.body.childNodes;

    function fuckshit(node: ChildNode) {
        if (node.nodeType === Node.TEXT_NODE) {
            node.textContent = getRandomVivsieWord();
        } else {
            node.childNodes.forEach(fuckshit);
        }
    }

    blep.forEach(fuckshit)
}

function nyaboom() {
    explodcount++
    const blep = document.body.childNodes;

    function fuckshit(node: ChildNode) {
        if (node.nodeType === Node.TEXT_NODE) {
            (node as Element).textContent = ''
            node.parentElement?.appendChild(<img style={{
                width: "1.5em"
            }} src="./explod.gif"/> as Element)
        } else if (node instanceof HTMLImageElement) {
            node.src = "./explod.gif"
        } else {
            node.childNodes.forEach(fuckshit);
        }
    }

    blep.forEach(fuckshit)
}

function App() {

    const [musicList, setMusicList] = createSignal<string[]>([]);
    const [isLoading, setIsLoading] = createSignal(true);
    const [oomfies, setoomfies] = createSignal(<>oomfies</>)
    const [isAnimating, setIsAnimating] = createSignal(false);
    const [animatedwoem, setanimatedwoem] = createSignal(false);
    onMount(async () => {
        try {
            const response = await fetch("https://imtoolazytomakeaproperapi.exhq.dev/");
            const data = await response.json();
            setMusicList(data);
        } catch (error) {
            console.error("Error fetching music data:", error);
        } finally {
            setIsLoading(false);
        }
    });
    let gitgay = <img onClick={() => {
        setIsAnimating(true)
        setTimeout(() => {
            window.location.href = "https://git.lgbt/exhq"
        }, 200);
        gitgay.src = "/gaybackground.png"
    }} classList={{'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating()}}
                      src="https://proxy.mono.exhq.dev/_/plain/https://git.lgbt/assets/img/logo.png"
                      alt="logo of git.lgbt"/> as HTMLImageElement
    // @ts-ignore
    return (
        <>
            {isitmybd() ? <Bdpfp setpopupEasterEgg={setpopupEasterEgg}/> :
                <Normalpfp setpopupEasterEgg={setpopupEasterEgg}/>}

            <p style={{display: "none"}}>AdvancedBr my beloved</p>
            <AdvancedBr count={6}/>


            <div class='parent'>
                <div class='cardchild'>
                    <h1>link tree</h1>
                    <div class='linktree'>
                        {gitgay}
                        <img onClick={() => {
                            setanimatedwoem(true)
                            setTimeout(() => {
                                window.location.href = "https://woem.men/@echo"
                            }, 200);
                        }} classList={{'woemimg': true, 'animate': animatedwoem()}}
                             src="https://proxy.mono.exhq.dev/_/plain/https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a"
                             alt="logo of woem.men"/>
                    </div>
                    <br/>
                    <div class='linktree'>
                        <span class='gitgaytext'>Git</span>
                        <span class='woemtext'>Fedi</span>
                    </div>
                </div>

                <div style={{
                    opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
                }} class='cardchild'>
                    <InfoCard bd={isitmybd()}/>

                </div>
                <div
                    onMouseEnter={() => {
                        setishover(true)
                    }}
                    onmouseleave={() => {
                        setishover(false)
                    }}
                    style={{
                        opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
                    }} class='cardchild'>
                    <Reviews/>
                </div>
            </div>
            <AdvancedBr count={2}/>
            <div class='easteregg' style={{opacity: isAnimating() || animatedwoem() ? "0%" : "100%"}}>
                <div class="musicbutton" onclick={() => {
                    setpopup(!shouldpopup())
                }}>
                    <p>typa shit ive been on</p><img style={{
                    "margin-left": "0.3em",
                    "max-width": "1.5em"
                }} src="./fireemoji.png"/>
                </div>
                <div class="musicbutton" >
                    <div class="oomfies" onClick={() => {
                        setoomfies(
                            <>
                                <SingularOomfie name='ashley' discordid='836177139798638592'
                                                url='https://ashleygraves.eu/'></SingularOomfie>
                                <SingularOomfie name='nea' discordid='310702108997320705'
                                                url='https://nea.moe'></SingularOomfie>
                                <SingularOomfie name='vozy' discordid='359175647257690113'
                                                url='https://vozy.exhq.dev'></SingularOomfie>
                                <SingularOomfie name='hazel' discordid='435026627907420161'
                                                url='https://yellows.ink/'></SingularOomfie>
                                <SingularOomfie name='nax' discordid='148801388938264576'
                                                url='https://nax.dev/'></SingularOomfie>
                                <SingularOomfie name='squirrelly' discordid='218032723296649217'
                                                url='https://squirrelly13.neocities.org/'></SingularOomfie>
                                <SingularOomfie name='ushie' discordid='399862294143696897'
                                                url='https://ushie.dev/'></SingularOomfie>
                                <SingularOomfie name='mugman' discordid='601836455006044163'
                                                url='https://mugman.tech'></SingularOomfie>
                                <SingularOomfie name='krystal' discordid='929208515883569182'
                                                url='https://krystal.exhq.dev/'></SingularOomfie>

                            </>
                        )
                    }}> {oomfies()}</div>
                </div>
                <div class="musicbutton" onclick={vivsiepop}>
                    <p>echo if it was written by vivsiepop</p>
                </div>
                <div class="musicbutton" onclick={() => {
                    if (explodcount > 5) {
                        document.body.innerHTML = ""
                        setTimeout(() => {
                            alert("sorry bud, you exploded so much that my document.body is gon")
                        }, 500)
                    } else {
                        new Audio("./explod.mp3").play()
                        nyaboom()
                    }
                }}>
                    <img style={{
                        "margin-left": "0.3em",
                        "max-width": "1.5em"
                    }} src="./nyaboom.webp"/>
                </div>
            </div>
            <AdvancedBr count={3}/>
            <Music shouldpopup={shouldpopup}>
                <div class='musicdiv'>
                    <div class='innermusic'>
                        <div class="music-close-button-div">
                            <button class="close-button" onClick={() => {
                                setpopup(false)
                            }}>X
                            </button>
                        </div>
                        <div class='musiclist'>
                            {isLoading() ? (
                                <p>Loading...</p>
                            ) : (
                                musicList().map((link) => <MusicEntry spotifylink={link}/>)
                            )}
                        </div>
                    </div>
                </div>
            </Music>
            <Music shouldpopup={shouldpopupEasterEgg}>
                <div class='musicdiv'>
                    <div class='innermusic'>
                        <div class="music-close-button-div">
                            <button class="close-button" onClick={() => {
                                setpopupEasterEgg(false)
                            }}>X
                            </button>
                        </div>
                        <img src={"https://pico.exhq.dev/-Aax47Gmdsy"}/>
                    </div>
                </div>
            </Music>
            <div class='footer'> made with ♥ by amy. <a href="https://git.lgbt/exhq/v2.exhq.dev">this website is
                opensource</a></div>
        </>
    )
}

export default App