<script lang="ts">
    import { onMount } from "svelte";
  
  
      let text:string;
      export let strings:string[];
      export let classVars:string;
      const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+[]{},.<>/?";
      let stringIndex = 0;
  
      function pickNextWord(){
          shuffleLetters(strings[stringIndex]);
  
          if(stringIndex == strings.length-1){
              stringIndex = 0;
          } else {
              stringIndex ++;
          }
      }
  
      //https://www.youtube.com/watch?v=W5oawMJaXbU
      //Hpyerplexed FTW
      function shuffleLetters(targetWord:string){
          let itterations = 0;
          const interval = setInterval(()=>{
              text = targetWord.split("").map((letter, index) => {
                  if(index < itterations){
                      return targetWord[index];
                  }
  
                  return letters[Math.floor(Math.random()*letters.length)];
              }).join("");
   
              if(itterations >= targetWord.length){
                  clearInterval(interval);
              }
  
              itterations ++;
          }, 40);
      }
      
      onMount(()=>{
          stringIndex = Math.floor(Math.random()*strings.length)
          pickNextWord();

          setInterval(pickNextWord,5000);
      })
  </script>
  
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
  <!-- <p class={classVars} on:mouseover={pickNextWord}> -->
  <p class={classVars}>
      {text}
  </p>