let archiveManualSwiper = undefined;
export async function renderManual() {
    await createManualSwiperArea();

    archiveManualSwiper = new Swiper('.modal-body > .manual-wrap .manual-swiper', {
        slidesPerView: 1,
        spaceBetween: 0,
        centeredSlides: true,
        speed: 400,
        loop: true,
        navigation: {
            nextEl: '.swiper.manual-swiper .button-next',
            prevEl: '.swiper.manual-swiper .button-prev',
        },
        pagination: {
            el: '.swiper.manual-swiper .swiper-pagination',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + (index + 1) + "</span>";
            },
        },
    });
}

/** swiper area
 *  [div] manual-wrap
 *      [div] manual-swiper (v) <-- swiper
 *           [ul] manual-swiper-wrap <-- swiper-wrapper
 *                [li] manual-swiper-item <-- swiper-slide
 *                      [img] manual-img
 *           [div] button-prev
 *           [div] button-next
 *           [div] swiper-pagination
 */

export async function createManualSwiperArea() {
    const manualWrap = document.querySelector('.modal-body > .manual-wrap');
    manualWrap.innerHTML = ''; // swiper 초기화

    const manualSwiper = document.createElement('div');
    manualSwiper.classList.add('swiper', 'manual-swiper');
    const manualSwiperWrap = document.createElement('ul');
    manualSwiperWrap.classList.add('swiper-wrapper', 'manual-swiper-wrap');
    manualSwiper.appendChild(manualSwiperWrap);
    manualWrap.appendChild(manualSwiper);

    // swiper 동적 생성
    for (let i = 0; i < 5; i++) {
        const manualSwiperItem = document.createElement('li');
        manualSwiperItem.classList.add('swiper-slide', 'manual-swiper-item');
        manualSwiperItem.dataset.save = true;
        manualSwiperItem.dataset.fileName = `${[i+1]}.jpg`;

        const manualImg = document.createElement('img');
        manualImg.classList.add('manual-img');
        manualImg.src = `/main/img/manual/${[i+1]}.jpg`;

        manualSwiperItem.appendChild(manualImg);
        manualSwiperWrap.appendChild(manualSwiperItem);
    }

    // 이전버튼, 다음버튼, 페이지네이션버튼 생성
    const swiperButtonPrev = document.createElement('div');
    swiperButtonPrev.classList.add('button-prev');
    const swiperButtonNext = document.createElement('div');
    swiperButtonNext.classList.add('button-next');
    const swiperPagination = document.createElement('div');
    swiperPagination.classList.add('swiper-pagination');
    manualSwiper.appendChild(swiperButtonPrev);
    manualSwiper.appendChild(swiperButtonNext);
    manualSwiper.appendChild(swiperPagination);
}