let slideList = [];
let articleCategory = "";
let nowArticeIndex = 0;

const renderContent = (index) => {
  const element = slideList[index];

  $("#articleTitle").html(element.title);
  $("#articleDate").html(`날짜 : ${element.view_indate}:00`);
  $("#articleImage").html(
    `<img src="${element.photo_url}" alt="img" class="object-cover block w-full h-full">`
  );
  $("#articleSubTitle").html(`${element.sub_title}`);
  $("#articleContents").html(`${element.contents.replace(/\n/g, "<br />")}`);
};

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

  slideList = e.result;

  renderContent(nowArticeIndex);

  $("#articleLoadingBar").hide();
  $("#articeBox").removeClass("hidden");
};

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

  const itemList = e.result;

  $("#listBox").empty();

  var listHtml = "";

  itemList.forEach((element) => {
    listHtml += `<!-- item 영역 -->`;
    listHtml += `<div class="overflow-hidden relative max-w-[350px] aspect-[1/1] rounded cursor-pointer" name="click-list-item" data-idx="${element.idx}">`;
    listHtml += `<img class="object-cover block w-full h-full"`;
    listHtml += `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-sm desktop:text-sm tablet:text-sm tablet:text-base text-white font-bold mobile:text-[13px] mobile:leading-[16px] line-camp">`;
    listHtml += `${element.title}`;
    listHtml += `</h3>`;
    // listHtml += `<p class="mt-2 text-sm text-gray-300 line-camp mobile:text-[12px] mobile:leading-[14px]">`;
    // listHtml += `${element.contents}`;
    // listHtml += `</p>`;
    listHtml += `</div>`;
    listHtml += `</div>`;
    listHtml += `<!-- // item 영역 -->`;
  });

  $("#listBox").html(listHtml);

  $("#listLoadingBar").hide();
  $("#listBox").removeClass("hidden");
};

(function ($) {
  if (articleIdx === "") {
    location.href = `/`;
  }

  commonFunction.aJax({
    url: service_url + "/get-slide-detail.php",
    data: {
      articleIdx: articleIdx,
      pageCategory: pageCategory,
    },
    type: "POST",
    done: initialize,
  });

  commonFunction.aJax({
    url: service_url + "/get-slide-detail-list.php",
    data: {
      pageidx: articleIdx,
      pageCategory: pageCategory,
    },
    type: "POST",
    done: initializeListBox,
  });

  $(document).on("click", "[name=click-left-button]", function () {
    if (nowArticeIndex > 0) {
      nowArticeIndex = nowArticeIndex - 1;
      renderContent(nowArticeIndex);
    } else {
      nowArticeIndex = slideList.length - 1;
      renderContent(nowArticeIndex);
    }
  });

  $(document).on("click", "[name=click-right-button]", function () {
    if (nowArticeIndex > slideList.length - 1) {
      nowArticeIndex = 0;
      renderContent(nowArticeIndex);
    } else {
      nowArticeIndex = nowArticeIndex + 1;
      if (nowArticeIndex > slideList.length - 1) {
        nowArticeIndex = 0;
      }
      renderContent(nowArticeIndex);
    }
  });

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