// source --> https://albaghdadiatv.com/wp-content/plugins/sy-pyrocms-image-migration/sy-pyrocms-image-migration.js?ver=6.9.4 
console.warn("========== SY:: PyroCMS Image Migration ==========");
// source --> https://albaghdadiatv.com/wp-content/themes/albagh-2/an_loader/an_loader.js?ver=6.9.4 
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {
  scrollFunction()
};
window.onload = function(){
  enableBurgerMenu();
  enableSearch();
};


/**
 * Event:: when window is scolled
 */
function scrollFunction() {
    
    var scrollTop = document.documentElement.scrollTop;

    if (scrollTop > 50) {
        document.getElementById("header").classList.add('ab-header-onscroll');
    } else {
        document.getElementById("header").classList.remove('ab-header-onscroll');
    }

    // if(window.innerWidth > 1210) return;
    // console.log("YES")
    // post scroll top
    var header = document.getElementById('header');
    var headline = document.getElementById('headline');
    var post_title = document.getElementsByClassName('ab-post-article-headline')[0];
    var meta = document.getElementsByClassName('ab-post-article-meta')[0];
    var top_stories = document.getElementsByClassName('ab-post-top-stories')[0];

    var post_top = header.clientHeight + headline.clientHeight + post_title.clientHeight + meta.clientHeight;

    if(window.innerWidth > 1210){
        if(scrollTop > post_top){
            top_stories.style.position = 'fixed';
        }else{
            top_stories.style.position = 'absolute';
        }
    }else{
        top_stories.style.position = 'relative';
    }
}

/**
 * Event:: when window is loaded
 */
function enableBurgerMenu(){

  var burger_menu = document.getElementsByClassName('ab-menu')[0];
  
  document.getElementById('btn_burger').addEventListener('click', () => {
    burger_menu.classList.add('ab-menu--active')
  })

  document.getElementById('burger_exit').addEventListener('click', () => {
    burger_menu.classList.remove('ab-menu--active')
  })
  
  var submenu_btns = document.getElementsByClassName('ab-menu-content__nav__item');
  
  [...submenu_btns].forEach((btn) => {
    btn.addEventListener('click', (element) => {
      var submenu = element.target.parentNode.nextElementSibling

      // if it has submenu
      if(submenu != null){
        submenu.classList.add('ab-menu-content__nav__submenu--active');
      }
    })
  })


  // back buttons
  var back_btns = document.getElementsByClassName('ab-menu-content__nav__submenu__header');

  [...back_btns].forEach((btn) => {
    btn.addEventListener('click', () => {
      var submenus = document.getElementsByClassName('ab-menu-content__nav__submenu');
      [...submenus].forEach((submenu) => {
        submenu.classList.remove('ab-menu-content__nav__submenu--active');
      })
    })
  })
}

    /**
    * Event:: Enable search
    */
   function enableSearch(){
    var btn_search = document.getElementById('btn_search');
    var btn_exit = document.getElementById('ab-search-btn-exit');
    var btn_burger_search = document.getElementById('burger_search');
    var input = document.getElementById('ab-search-input');
    var result_count_area = document.getElementById('ab-search-result-count-area');
    var result_count = document.getElementById('ab-search-result-count');
    var result_area = document.getElementById('ab-search-result-data');
    var input_area = document.getElementById('ab-search__input-area');
    var search_page = document.getElementById('ab-search');

    btn_search.addEventListener('click', () => {
      search_page.classList.add('ab-search--active');
    })

    btn_burger_search.addEventListener('click', () => {
      search_page.classList.add('ab-search--active');
    })

    btn_exit.addEventListener('click', () => {
      search_page.classList.remove('ab-search--active');
    })

    var searching = false;

    input.addEventListener('keyup', debounce(() => {
      result_count_area.style.visibility = 'visible';
      result_count.innerHTML = '...';
    }, async () => {
      var res;

      // don't search if it's already searching
      if(searching) return;

      // if not, start searching
      if(!searching){
        searching = true;
        res = await search(input.value);
        searching = false;
      }

      // if no data found
      if(res == 404){
        result_count_area.style.visibility = 'hidden';
        result_count.innerHTML = '0';
        result_area.innerHTML = '';
        input_area.classList.remove('ab-search__input-area--active');

        return;
      }

      // show results count
      result_count_area.style.visibility = 'visible';
      result_count.innerHTML = `<b>${res.count}</b> النتائج`;
      input_area.classList.add('ab-search__input-area--active');

      // loop items
      result_area.innerHTML = '';

      res.posts.forEach(post => {

        var cat_labels = '';

        post.category.forEach(cat => {
          cat = cat.toLowerCase().replace('_', '-').split(' ').join('-');
          cat_labels += `label-${cat} `;
        });
        
        result_area.innerHTML += `
          <div class="tease-cat-info">
              <a href="${post.url}" alt="${post.title}">
                <div class="tease-cat-info-image">
                    <img class="tease-cat-info-image-main" src="${post.img_url}" />
                </div>
                <span class="label ${cat_labels}">${post.category[0]}</span>
                <div class="tease-cat-info-title">${post.title}</div>
              </a>
          </div>
        `;
      })
    }, 1000));
  }



  /**
   * Search posts by text by fetching data via API
   * @param { String } value
   * @return { Object } 
   * Object properties: count, posts
   */
  async function search(value){
    var url = window.location.protocol + '//' + window.location.hostname + '/';
    // var url = 'https://albaghdadiyagroup.sywebhosting.co.uk/';
    var api = url + 'wp-json/search/teases/' + value;

    let res = await fetch(api).then(res => {
      if(res.status !== 200){
        return 404;
      }
      return res.json();
    });

    return res;
  }

/**
 * Returns a function, that, as long as it contiunes to be invoked, will not
 * be triggered. The function will be called after it stops being called for
 * N milliseconds. If `imeediate` is passed, trigger the function on the
 * leading edge, instaed of trailing.
 */
function debounce(func_immediate, func, wait, immediate){
  var timeout;

  return () => {
    // function to trigger immediately
    func_immediate();
    
    var context = this
    var args = arguments;

    var later = () => {
      timeout = null;
      if( !immediate ){
        func.apply(context, args);
      }
    };
    
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if(callNow){
      func.apply(context, args);
    } 
  }
}

/**
 * Show/Hide reply section
 * @param { HTMLCollection } e
 * @return { Void }
 */
function replyToggle(e){
  var btn = e.target;
  var reply_box = btn.parentNode.nextElementSibling.querySelector('div > .comment-reply-box');
  reply_box.classList.toggle('comment-reply-box--active');
}

/**
 * Get API path
 */
function api_path(path, value){
  var root = window.location.protocol + '//' + window.location.hostname + '/';
  var api = 'wp-json/' + path;

  return root + api + value;
}

/**
 * Show more posts
 */;