//LOOK HERE, edit this story and use NOUN or VERB or any of the parts of speech in the wordFinder line below
let yourMadLibStoryA = 
`My name is PROPERNAME and I am the ADJECTIVE captain of the spaceship PROPERNAME. After NUMBER days, the ship's NOUN started to malfunction.  My crew is ING-VERB everyday to keep morale ADJECTIVE.  A repair NOUN is on the way with new PLURALNOUN.  This has been a/an ADJECTIVE adventure!`;

let yourMadLibStory = 'Hello, I am absolutely ADJECTIVE to welcome to the ADJECTIVE NOUN hall of fame!!!! Just so you know, we no longer allow guests to bring any sort of NOUN, after PROPERNAME had a very ADJECTIVE incident... Anyway, our newest candidate is PROPERNAME, who is renowned for ING-VERB NUMBER PLURALNOUN!!!! Can you believe it??? '

let yourMadLibTitle = "Wacky Hall of Fame!!!";

//If you want to add your own parts of speech you could add them here
//By the way, this is called a REGULAR EXPRESSION
let wordFinder = /NOUN|VERB|ADJECTIVE|ADVERB|PLURALNOUN|NUMBER|PROPERNAME|LOCATION|ANIMAL|ING-VERB/g;

//this will find every part of speech word from wordFinder
let partsOfSpeech = yourMadLibStory.match(wordFinder); //e.g. ["ADJECTIVE","NOUN","VERB","NOUN"]
//this will make an array of everything else in your story that isn't a partOfSpeech
let chunksOfStory = yourMadLibStory.split(wordFinder); //e.g. ["part of story","another part"]


// Initialize Firebase our database, you don't have to touch this part
var firebaseConfig = {
    apiKey: "AIzaSyBHcN0HVMwxxW-xBkXHYAm2X-kGWjxPzNk",
    authDomain: "basiccrud-ffe19.firebaseapp.com",
    databaseURL: "https://basiccrud-ffe19.firebaseio.com",
    projectId: "basiccrud-ffe19",
    storageBucket: "basiccrud-ffe19.appspot.com",
    messagingSenderId: "47974982638",
    appId: "1:47974982638:web:9a034202ca787ee47764ff"
};
firebase.initializeApp(firebaseConfig);
function getUniqueId() { //a silly function just to let you fork this codepen and have your own database
  var CODEPEN_ID = /[codepen|cdpn]\.io\/[^/]+\/(?:pen|debug|fullpage|fullembedgrid)\/([^?#]+)/;
  var id;
  if(CODEPEN_ID.test(window.location.href)) {
    id = CODEPEN_ID.exec(window.location.href)[1];
  } else if (CODEPEN_ID.test(document.location.href)){
    id = CODEPEN_ID.exec(window.location.href)[1];
  } else {
    var metas = document.getElementsByTagName('link');    
    for(i=0;i<metas.length;i++) {
      if(metas[i].getAttribute('rel') == 'canonical') {
        if(CODEPEN_ID.test(metas[i].getAttribute('href')))
        id = CODEPEN_ID.exec(metas[i].getAttribute('href'))[1];  
      }
    }
  }
  return id || `randoDB${Math.floor(Math.random()*10000000)}`;
}

//this is the "handler" for YOUR database where we can store and read values from anyone at your site!
let yourDatabase = firebase.database().ref("madlibs").child(getUniqueId());

let showEmptyQuestions = function(){
  $("#display").html(`<h2 class="title">${yourMadLibTitle}</h2>`);
  for(let i=0; i < partsOfSpeech.length; i++){
    $("#display").append(
`
<div class="inputarea">
  <label>${partsOfSpeech[i]}:</label>
  <input class="speechparts" placeholder="${partsOfSpeech[i]}" data-index="${i}"/>
</div>
`);
  }
  $("#display").append(`<button id="finish" disabled=true>All Done</button>`);
  $(".speechparts").on("keyup", function(evt){ 
    let answeredIndex = $(evt.currentTarget).attr("data-index");
    let newAnswer = $(evt.currentTarget).val();
    yourDatabase.child("currentAnswers").child("answers").child(answeredIndex).set(newAnswer);
  });
  $("#finish").click(function(){
    yourDatabase.child("currentAnswers").child("hideStory").set(false);
  });
}

showEmptyQuestions();

let showQuestions = function(answerArray){
  if (answerArray.length == 0){
    showEmptyQuestions();
  }
  let numberOfAnswers = 0;
  for(let i=0; i < partsOfSpeech.length; i++){
    let answer = ""; //for each question, check for answer, display an input box
    if (answerArray.hasOwnProperty(i)){
      answer = answerArray[i];
      $(`.speechparts[data-index=${i}]`).val(answer);
    }
    if (answer.length > 0){
      numberOfAnswers += 1;
    }
  }
  if (numberOfAnswers == partsOfSpeech.length){
    //We have an answer for every word, let's show the story
    $("#finish").attr("disabled", false);
  }
};

let showStory = function(answerArray){
  $("#display").html(`<h2 class="title">${yourMadLibTitle}</h2>`);
  for(let i=0; i < partsOfSpeech.length; i++){
    let answer = answerArray[i] || ""; //for each question, check for answer, display an input box
    $("#display").append(`${chunksOfStory[i]}<span class="answer">${answerArray[i]}</span>`);
  }
  $("#display").append(`${chunksOfStory[partsOfSpeech.length] || ""}`);
  $("#display").append(`<div><button id="reset">Play Again?</button></div>`);
  $("#reset").on("click", function(){
    yourDatabase.child("currentAnswers").set({hideStory: true});
  });
};

//This is where the action lives
yourDatabase.child("currentAnswers").on("value", function(dataSnapshot){ 
  //this function gets called every time the page is loaded AND when someone updates an answer
  //it's job is to draw the database values onto our screen
  //we use the hideStory key to decide if we're still gathering answers 
  //or showing the finished product
  let everyOneElsesAnswers = dataSnapshot.val();
  if (everyOneElsesAnswers){
    //there was at least one answer
    if (!everyOneElsesAnswers.hasOwnProperty("hideStory")){
      //if this is the FIRST time connecting to the DB (i.e. you just forked)
      yourDatabase.child("currentAnswers").child("hideStory").set(true);
      everyOneElsesAnswers.hideStory = true;
    }
    if (everyOneElsesAnswers.hideStory){
      showQuestions(everyOneElsesAnswers.answers || []); //show questions
    } else {
      showStory(everyOneElsesAnswers.answers); //show results
    }
  } else {
    showQuestions([]); //an empty array
  }
});