var $modal = document.getElementById("modal");
var $nav = document.getElementById("nav");
var $menuBtn = document.getElementById("menu-btn");
var $menu = document.getElementById("list");
var $viewList = document.getElementById("viewer-list");
var siema;
var $viewerNav = document.getElementById("viewer-nav");


$modal.addEventListener("click", function () {
    menuToggle();
});
$menuBtn.addEventListener("click", function () {
    menuToggle();
});
$viewerNav.addEventListener("click", function (e) {

    if (e.target.tagName == 'SPAN') {
        // console.log(Number(e.target.innerText));
        siema.goTo(Number(e.target.innerText)-1);
    }else if(e.target.tagName == 'IMG'){
        if(e.target.id == "next-slider"){
            siema.next();
        }else{
            siema.prev();
        }
    }
});

function menuToggle() {
    var isOpen = $nav.classList.contains('slide-in');
    $nav.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
    $modal.setAttribute('class', isOpen ? 'fade-out' : 'fade-in');

}
$menu.addEventListener('click', function (e) {
    if (e.target.tagName == 'LI') {
        menuToggle();
        var imgsIDs = e.target.dataset.values.split("-");
        document.getElementById("title").innerText = e.target.innerText.split("-")[1];
        // imgsIDs = imgsIDs);
        // console.log(e, e.target.dataset.values, imgsIDs);
        var _html = ``;
        for (var id = 0; id < imgsIDs.length; id++) {
            var _img = (Number(imgsIDs[id]) < 10) ? "0" + imgsIDs[id] : imgsIDs[id];
            _html += `<img src="help/${(_img)}.jpg"/>`
        }
        $viewList.innerHTML = _html;
        setupSlider();
        // Check if the element is a LI
    }
});

function setupSlider() {
    if (siema) siema.destroy();

    siema = new Siema({
        selector: '#viewer-list',
        duration: 200,
        easing: 'ease-out',
        perPage: 1,
        startIndex: 0,
        draggable: true,
        multipleDrag: false,
        threshold: 20,
        loop: false,
        rtl: false,
        onInit: () => {
            generateDOTS();
        },
        onChange: () => {
            sliderNumberRefresh();
        },
    });

    sliderNumberRefresh();
}

function generateDOTS() {
    var count = document.querySelector("#viewer-list > div").children.length;
    var _html = `<img class="btn" id="prev-slider" src="assets/img/left-arrow.svg" title="قبلی"/>`;
    for (let i = 0; i < count; i++) {
        _html += `<span class="slider-num">${i + 1}</span>`;
    }
    _html += `<img class="btn" id="next-slider" src="assets/img/right-arrow.svg" title="بعدی"/>`;
    $viewerNav.innerHTML = _html;

}
function sliderNumberRefresh() {
    var _oldNow = document.querySelector(".slider-num.now");
    if (_oldNow) _oldNow.classList.remove("now");
    document.querySelectorAll(".slider-num")[siema.currentSlide].classList.add("now");
}