var cards = {
  // (A) PROPERTIES
  data : null, // flashcards data array
  cNow : null, // current flashcard
  cMode : null, // current mode - "v"iew or "m"anage
  hScr : null, // html screens
  hCard : null, // html card wrapper

  // (B) INIT APP
  init : () => {
    // (B1) RESTORE CARDS FROM LOCALSTORAGE
    cards.data = localStorage.getItem("cards");
    if (cards.data == null) { cards.data = []; }
    else { cards.data = JSON.parse(cards.data); }

    // (B2) GET HTML ELEMENTS
    cards.hScr = [
      document.getElementById("screenA"),
      document.getElementById("screenB")
    ];
    cards.hCard = document.getElementById("bCard");
  },

  // (C) SWTICH HTML SCREEN
  screen : (i) => { for (let j in cards.hScr) {
    if (i==j) { cards.hScr[j].classList.remove("hide"); }
    else { cards.hScr[j].classList.add("hide"); }
  }},

  // (D) UPDATE CURRENT & TOTAL CARDS
  count : () => {
    document.getElementById("bCardNow").innerHTML = cards.data.length==0 ? 0 : cards.cNow + 1;
    document.getElementById("bCardAll").innerHTML = cards.data.length;
  },
  
  // (E) VIEW/MANAGE CARDS
  view : (mode) => {
    // (E1) VIEW MODE - CONTINUE ONLY WHEN THERE ARE CARDS
    if (mode=="v" && cards.data.length==0) {
      alert("Add some cards first...");
      return;
    }

    // (E2) UPDATE FLAGS & CARDS COUNT
    cards.cMode = mode;
    cards.cNow = 0;
    cards.count();
    
    // (E3) SHOW/HIDE "MANAGE CARD" CONTROLS
    if (mode=="v") { for (let i of document.querySelectorAll(".bManage")) {
      i.classList.add("hide");
    }} else { for (let i of document.querySelectorAll(".bManage")) {
      i.classList.remove("hide");
    }}
    
    // (E4) DRAW CARD & SHOW
    cards.draw();
    cards.screen(1);
  },
  
  // (F) DRAW CARD
  draw : () => {
    // (F1) VIEW MODE CARD
    if (cards.cMode=="v") {
      cards.hCard.innerHTML = `<div class="card" onclick="this.classList.toggle('flip')">
      <div class="front">${cards.data[cards.cNow][0]}</div>
      <div class="back">${cards.data[cards.cNow][1]}</div>
      </div>`;
    }

    // (F2) MANAGE MODE CARD
    else {
      if (cards.data.length==0) {
        cards.hCard.innerHTML = `<div class="mFront">Add a card first.</div>`;
      } else {
        // @TODO
        cards.hCard.innerHTML = `
        <textarea class="mFront" onchange="cards.update(this.value, 1)">${cards.data[cards.cNow][0]}</textarea>
        <textarea class="mBack" onchange="cards.update(this.value)">${cards.data[cards.cNow][1]}</textarea>`;
      }
    }
  },

  // (G) LAST/NEXT CARD
  move : (next) => {
    // (G1) UPDATE CURRENT CARD
    if (next) { cards.cNow++; }
    else { cards.cNow--; }
    if (cards.cNow >= cards.data.length) { cards.cNow = 0; }
    if (cards.cNow < 0) { cards.cNow = cards.data.length - 1; }

    // (G2) UPDATE HTML INTERFACE
    cards.count();
    cards.draw();
  },

  // (H) SAVE CARD DATA TO LOCALSTORAGE
  save : () => {
    localStorage.setItem("cards", JSON.stringify(cards.data));
  },

  // (I) ADD EMPTY CARD
  add : () => {
    cards.data.splice(cards.cNow, 0, ["Front", "Back"]);
    cards.save();
    cards.count();
    cards.draw();
  },
  
  // (J) UPDATE CURRENT CARD
  update : (txt, side) => {
    if (side) { cards.data[cards.cNow][0] = txt; }
    else { cards.data[cards.cNow][1] = txt; }
    cards.save();
  },
  
  // (K) DELETE CURRENT CARD
  delete : () => { if (cards.data.length!=0) {
    cards.data.splice(cards.cNow, 1);
    cards.save();
    if (cards.data.length == 0) { cards.cNow = 0; }
    else if (cards.cNow+1 >= cards.data.length) {cards.cNow = cards.data.length-1; }
    cards.count();
    cards.draw();
  }}
};
window.onload = cards.init;