document.addEventListener('alpine:init', () => {
      Alpine.data('wordFlip', () => {
         return {
            phrases: ['Hockey', 'C0d3!', 'Zinger', 'Salmon', 'Truck', 'Backup', 'Import', '@John', 'Eagles', 'Visor', 'Oct 23', 'Hi :)'],
            size: 0,
            done: 0,
            word: '',
            letters: [],
            run: false,
            speed: 15, //angle value must be a divisor of 90/180/270/360
            colors: ['#000000', '#475569', '#dc2626', '#ea580c', '#eab308', '#16a34a', '#2563eb', '#c026d3'],
            color: false,
            colorInt: false,

            init(){

               this.phrases = this.phrases.map(element => {
                  return element.toUpperCase();
               });

               var longestWord = this.phrases.reduce((longest, currentWord) => {
                  if(currentWord.length > longest.length)
                     return currentWord;
                  else
                     return longest;
               }, "");

               this.size = longestWord.length;

               for (var i=0;i<this.size;i++){
                  this.letters.push({index: i, glyph: ' '});
               }

            },

            setWord(){
               let word = this.word;
               while (word == this.word){
                  word = this.phrases[Math.floor(Math.random()*this.phrases.length)];
               }

               this.word = word;
               let letters = this.word.split('');

               this.letters.map((element, index) => {
                  element.glyph = letters[index] ? letters[index] : ' ';
               });

               this.done = 0;
               this.$dispatch('set-letters', {letters: this.letters});

               this.setColor();

            },

            setColor(){
               if (this.done != this.size){
                  let color = this.color;
                  while (color == this.color){
                     color = this.colors[Math.floor(Math.random()*this.colors.length)];
                  }
                  this.$root.setAttribute('style', `--tileColor:${color};`);               
                  this.colorInt = setTimeout(this.setColor.bind(this), 2000);
               }
                        
            },

            glyphDone(){
               this.done = this.done + 1;
               if (this.done == this.size){
                  clearTimeout(this.colorInt);
               }
            }
         }
      });

      Alpine.data('letterFlap', (index) => {
         return {
            glyphs: ' ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890!@#$%^&*()-_=+,.:;?`~{}[]/',
            glyph: '',
            glyphIndex: 0,
            index: index,
            rotation: 0,
            canFlip: false,
            running: false,

            setLetter(details){

               let newGlyph = details.letters[this.index].glyph;

               if (this.glyph != newGlyph){
                  this.glyph = newGlyph;
                  if (!this.running){
                     
                     if (this.rotation == 0) {
                        this.updateIndex();
                        this.updateBack();
                     } else {
                        this.updateFront();
                     }

                     setTimeout(() => {
                        requestAnimationFrame(this.spin.bind(this));
                     },this.index * 50);
                  }
               }
            },
            updateFlap(){
               this.updateFront();
               this.updateIndex();
               this.updateBack();
            },

            updateFront(){
               this.$root.dataset.front = this.glyphs.charAt(this.glyphIndex);
            },

            updateBack(){
               this.$root.dataset.back = this.glyphs.charAt(this.glyphIndex);
            },

            updateIndex(){
               if (this.glyphIndex < this.glyphs.length - 1){
                  this.glyphIndex = this.glyphIndex + 1;
               } else {
                  this.glyphIndex = 0;
               }
            },

            spin(){
               this.rotation = this.rotation + parseInt(this.speed);

               if (this.rotation > 360){
                  this.rotation = 0;
               }

               if (this.rotation == 90  ){
                  this.updateIndex();
                  this.updateFront();
               } else if (this.rotation == 270 ){ 
                  this.updateIndex();
                  this.updateBack();
               }

               if ((this.rotation == 0 && this.$root.dataset.front == this.glyph) || (this.rotation == 180 && this.$root.dataset.back == this.glyph)){
                 //stop
                 this.$dispatch('glyph-done');
                 this.running = false;
               } else {   
                  this.running = true;              
                  requestAnimationFrame(this.spin.bind(this));
               }

            }
         }
      });
     
   })