import './App.css'
import HoverComponent from './components/name.tsx'
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';
export const [shouldpopup, setpopup] = createSignal(false)
export const [ishover, setishover] = createSignal(false)
function App() {
  function remov() {
    for (let i = 0; i < document.styleSheets.length; i++) {
      let styleSheet = document.styleSheets[i];
      let rules = styleSheet.cssRules || styleSheet.rules;
      for (let j = 0; j < rules.length; j++) {
        let rule = rules[j];
        if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
          styleSheet.deleteRule(j);
        }
      }
    }
  }
  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 class='header'>
        <img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" />
        <HoverComponent />
      </div>


      <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/@exhq"
              }, 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'>
          <h1>hi :3</h1>
          <span>silly goober who does silly stuff <br /> self proclaimed programmer and progamer <br /> shitposts for fun</span>
        </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'>
        <input type="button" onclick={() => { setpopup(!shouldpopup()) }} class="musicbutton" value="say gex" />

      </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>
    </>
  )
}

export default App