import './App.css'
import AdvancedBr 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 [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 [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.gay/exhq"
    }, 200);
    gitgay.src = "/gaybackground.png"
  }} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
  return (
    <>
      {/* <div onmouseenter={remov} class='header'>
        <div>
          <Normalpfp />
        </div>
        <HoverComponent />
      </div> */}
      {isitmybd() ? <Bdpfp /> : <Normalpfp />}

      <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://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="LMAO IMAGINE BEING BLIND" />
          </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'>
        <div class="musicbutton" onclick={() => { setpopup(!shouldpopup()) }}>
          <p>typa shit ive been on</p><img style={{
            "margin-left": "0.3em",
            "max-width": "1.5em"
          }} src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/72x72/1f525.png" />
        </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>
      <div class='footer'> made with ♥ by echo. <a href="https://git.gay/exhq/v2.exhq.dev">this website is opensource</a></div>
    </>
  )
}

export default App