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 flkty = new Flickity(".gallery", {
    freeScroll: true,
    wrapAround: true,
    hash: true, // options
});
flkty.on("select", function (index) {
    var currentbook = document.getElementsByClassName("gallery-cell is-selected")[0].getAttribute("id");
    if (currentbook == lastbook) {
        return;
    }
    //TODO: Fill view-container with books
    setLocalizeDataAttr("view-title", currentbook + ".title");

    lastbook = currentbook;
    refreshBooks();
});
flkty.on("settle", function (index) {
    console.log("Flickity settled at " + index);
    refreshBooks();
});





/*
document
  .getElementsByClassName("gallery")[0]
  .insertAdjacentHTML(
    "afterbegin",
    '<div class="gallery-cell" id="ADV1"><div class="book-container"><div class="book"><img src="img\\books\\ADV1_BC_EN.png" /></div><div class="book-title">Adventurer</div></div></div>'
  );*/