var lastbook;
var currentbook;

fetch("/lang/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");
        //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",
        "book_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();
}