import data from "/lang/books-en.json" assert { type: "json" };
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 lastbook;
var currentbook;
var flkty = new Flickity(".gallery", {
    freeScroll: true,
    wrapAround: true,
    hash: true, // options
});
refreshBooks();
currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
    //TODO: Fill view-container with books
    fillBookView();

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

function fillBookView(){
  var bookAttributes = ["book_title","book_desc","cf-date","physical-link","pdf-link","cf-link"]

  bookAttributes.forEach(function(attr) {
    setLocalizeDataAttr(attr, currentbook+'.'+attr.split("_")[1]);
  });
  setLocalizeDataAttr("view-title", currentbook + ".title");
  setLocalizeDataAttr("view-desc", currentbook + ".desc");
  setLocalizeDataAttr("cf-date", currentbook + ".cf-date");
  setLocalizeDataAttr("physical-link", currentbook + ".physical-link");
  setLocalizeDataAttr("pdf-link", currentbook + ".pdf-link");
  setLocalizeDataAttr("cf-link", currentbook + ".cf-link");
  lastbook = currentbook;
  console.log(currentLang);
  refreshBooks();
}