let pageNumber = 0;
let requestDo = true;

const viewSlide = (e) => {
  if (e.state === false) {
    alert(e.message);
    return false;
  }

  const itemList = e.result;

  if (itemList.length === 0) {
    requestDo = false;
  }

  if (pageNumber == 0) {
    $("#mainSlideList").empty();
  }

  var listHtml = "";

  itemList.forEach((element) => {
    listHtml += `<div class="overflow-hidden relative max-w-[300px] aspect-[1/1] rounded cursor-pointer" name="click-item" data-idx="${element.idx}">`;
    listHtml += `<img class="object-cover block w-full h-full" src="${element.photo_url}" alt="img">`;
    listHtml += `<div class="absolute bottom-0 left-0 right-0 px-4 py-2 bg-black-rgba">`;
    listHtml += `<h3 class="text-xl desktop:text-lg tablet:text-sm tablet:text-base text-white font-bold mobile:text-[13px] mobile:leading-[16px] line-camp">`;
    listHtml += `${element.title}`;
    listHtml += `</h3>`;
    listHtml += `</div>`;
    listHtml += `</div>`;
  });

  if (pageNumber === 0) {
    $("#mainSlideList").html(listHtml);
  } else {
    $("#mainSlideList").append(listHtml);
  }

  $("#loadingBar").hide();
  $("#moreButtonBox").show();
};

(function ($) {
  $("#loadingBar").show();
  commonFunction.aJax({
    url: service_url + "/get-slides.php",
    data: {
      pageCategory: pageCategory,
      pageNumber: pageNumber,
      pageCount: pageCount,
    },
    type: "POST",
    done: viewSlide,
  });

  $(document).on("click", "[name=click-item]", function () {
    var idx = $(this).data("idx");
    location.href = `/pages/detail.html?category=${pageCategory}&idx=${idx}`;
  });

  $(document).on("click", "[name=button-get-more]", function () {
    pageNumber = pageNumber + pageCount;

    if (requestDo) {
      $("#moreButtonBox").hide();
      $("#loadingBar").show();

      commonFunction.aJax({
        url: service_url + "/get-slides.php",
        data: {
          pageCategory: pageCategory,
          pageNumber: pageNumber,
          pageCount: pageCount,
        },
        type: "POST",
        done: viewSlide,
      });
    }
  });
})(jQuery);