var lastbook;
var currentbook;

fetch("/data/books-en.json")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);

    const gallery = document.getElementsByClassName("gallery")[0];

    for (const key in data) {
      console.log(data[key].code, data[key].title, data[key].cover);
      var bookHTML = `<div class="gallery-cell" id="${data[key].code}">
    <div class="book-container">
      <div class="book">
        <img data-localize="${data[key].code}.cover"  />
      </div>
      <div data-localize="${data[key].code}.title" class="book-title">${data[key].title}</div>
    </div>
  </div>
`;
      gallery.insertAdjacentHTML("afterbegin", bookHTML);
    }

    var flkty = new Flickity(".gallery", {
      freeScroll: true,
      wrapAround: true,
      hash: true, // options
    });
    refreshBooks();
    currentbook = document
      .getElementsByClassName("gallery-cell is-selected")[0]
      .getAttribute("id");
    fillBookView();

    flkty.on("select", function (index) {
      currentbook = document
        .getElementsByClassName("gallery-cell is-selected")[0]
        .getAttribute("id");
      if (currentbook == lastbook) {
        return;
      }
      fillBookView();
    });
    /*flkty.on("settle", function (index) {
    console.log("Flickity settled at " + index);
    refreshBooks();
});*/
  });

function fillBookView() {
  var bookAttributes = [
    "book_title",
    "book_desc",
    "book_cf-date",
    "book_physical-link",
    "book_pdf-link",
    "book_cf-link",
    "book_author"
  ];
  bookAttributes.forEach(function (attr) {
    setLocalizeDataAttr(attr, currentbook + "." + attr.split("_")[1]);
  });
  lastbook = currentbook;
  console.log(currentLang);
  //call to language.js
  refreshBooks();
}