$('body').append('<style>.popup-modal-template.is-hide{opacity: 0;pointer-events: none;}body.popup-open {overflow: hidden;}}</style>');
const storedKey = 'popupdata';
$(document).ready(function(){
  if ($('body').hasClass('show-popup')) {
    if (location.href.indexOf('popupreset=1') != -1) {
      localStorage.removeItem(storedKey);
      location.href = location.href.replace('popupreset=1', '');
    }
    $.ajax({
      url: book_api_url_root + '/api/banners',
      type: 'get',
      cache: false,
      dataType:'json',
      data:{
          key: book_api_key,
          token: get_token(),
          num: 100,
          layout_num: 2
      }
    }).done(function(data){
      var banners = data.banners;
      var storedArray = [];
      var storedData = localStorage.getItem(storedKey);
      if (storedData) {
        storedArray = JSON.parse(storedData);
      }
      console.dir(storedArray);
      

      if (banners.length > 0) {
        var tmp = [];
        banners.forEach(function(banner){
          if (banner.book_content_id) {
            tmp[tmp.length] = banner;
          }
        });
        banners = tmp;

        var tmp = [];
        banners.forEach(function(banner){
          var result = false;
          storedArray.forEach(function(tmpObj){
            if (tmpObj['id'] == banner.book_content_id) {
              result = true;
            }
          });

          if (!result) {
            tmp[tmp.length] = banner;
          }
        });
        banners = tmp;


        $('body').attr('data-popup-cnt', banners.length);
        if (banners.length >= 0) {
          $('body').append('<div class="popup-show-area" style="perspective: 1000;transform: translate3d(0, 0, 0);"><div class="popup-show-area-bg"></div></div>');
          banners.forEach(function(banner){
            for (const key in banner) {
              if (typeof banner[key] === "string") {
                banner[key] = escapeHTML(banner[key]);
              }
            }
            var popup = $('#popup-modal-template-wrapper .popup-modal-template').clone(true);
            $(popup).find('.popup-modal-image').attr('src', banner.image_url).attr('alt', banner.title);
            $(popup).find('.popup-modal-link').attr('href', '/book/'+banner.book_id);
            if (banner.link) {
              $(popup).find('.popup-modal-link').attr('href', banner.link);
            }
            if (!isSameDomain(location.href, $(popup).find('.popup-modal-link').attr('href'))) {
              $(popup).find('.popup-modal-link').attr('target', '_blank');
            }
  
            if (banner.label_csv) {
              $(popup).find('.popup-modal-label').text(banner.label_csv);
            } else {
              $(popup).find('.popup-modal-label').remove();
            }
  
            $(popup).addClass('is-hide');
            $(popup).attr('data-popup-id', banner.book_content_id);
            $('.popup-show-area').append(popup);
  
            var img = $(popup).find('.popup-modal-image');
            if (img[0].complete) {
              $(popup).removeClass('is-hide');
              $('body').addClass('popup-open');
            } else {
              // 画像の読み込み完了時
              img.on('load', function() {
                $(popup).removeClass('is-hide');
                $('body').addClass('popup-open');
              });
          
              // 読み込みエラー時
              img.on('error', function() {
                console.log('popup image not found..');
                closePopup(popup);
              });
            }
          });
          if (Number($('body').attr('data-popup-cnt')) <= 0) {
            $('.popup-show-area').remove();
          }
        }
      }
    })
  }
});

$(document).on('click', '.popup-modal-close-btn,.popup-modal-link', function(){
  closePopup($(this).parents('.popup-modal-template'));
  if ($(this).attr('href')) {
    if ($(this).attr('target')) {
      $('.popup-show-area').css('display', 'none');
      setTimeout(function(){
        $('.popup-show-area').css('display', 'flex');
      }, 500);
      window.open($(this).attr('href'), '_blank');
    } else {
      location.href = $(this).attr('href');
    }
  }
});

$(document).on('click', '.popup-modal-template', function(event){
  var that = this;
  if (!$(event.target).closest('.popup-modal').length) {
    closePopup($(this));
  }
});

function closePopup(template) {
  var popupId = $(template).attr('data-popup-id');
  $('body').attr('data-popup-cnt', Number($('body').attr('data-popup-cnt')) - 1);
  var storedArray = [];
  var storedData = localStorage.getItem(storedKey);
  if (storedData) {
    storedArray = JSON.parse(storedData);
  }

  var result = storedArray.find(function(item) {
    return item.id === popupId;
  });
  if (!result) {
    var popObj = {
      id: popupId,
      date: new Date()
    }
    storedArray.push(popObj);
  }
  localStorage.setItem(storedKey, JSON.stringify(storedArray));

  $(template).remove();

  if (Number($('body').attr('data-popup-cnt')) <= 0) {
    $('body').removeClass('popup-open');
    $('.popup-show-area').remove();
  }
}

function isSameDomain(url1, url2) {
  // 現在のページのベースURLを取得
  const base = window.location.origin;

  // URLオブジェクトを使用してドメインを取得
  const u1 = new URL(url1, base); // ベースURLを考慮して絶対URLを生成
  const u2 = new URL(url2, base);

  // ドメインを比較
  return u1.origin === u2.origin;
}

function escapeHTML(input) {
  return input;
  /*
  return input
    .replace(/&/g, "&amp;")  // & をエスケープ
    .replace(/</g, "&lt;")  // < をエスケープ
    .replace(/>/g, "&gt;")  // > をエスケープ
    .replace(/"/g, "&quot;") // " をエスケープ
    .replace(/'/g, "&#039;"); // ' をエスケープ
    */
}