/**
 * A container of ‘breadcrumbs.’
 * @public
 * @const
 * @global
 * @type {Element}
 * @readonly
 * @see whBreadcrumbStyles
 */
const whBreadcrumb = document.querySelector(".wh_breadcrumb");
/**
 * {@link whBreadcrumb Breadcrumb} container styles.
 * @public
 * @const
 * @global
 * @type {CSSStyleDeclaration}
 * @readonly
 */
const whBreadcrumbStyles = window.getComputedStyle(whBreadcrumb);
/**
 * Main content container.
 * @public
 * @const
 * @global
 * @type {HTMLElement}
 * @readonly
 */
const whTopicBody = document.getElementById("wh_topic_body");
/**
 * The function calculates and applies a top internal indentation to the main content container relative to the
 * breadcrumb container.
 * @public
 * @const
 * @example Calling a function on page load
 * dynamicPaddingTopWhTopicBody();
 * @example Dynamic use when changing window size
 * window.addEventListener('resize', dynamicPaddingTopWhTopicBody, false);
 * @example To optimise, before using the function in an event check that breadcrumbs exist
 * if (whBreadcrumbStyles.display === 'none') {
 *  window.addEventListener('resize', dynamicPaddingTopWhTopicBody, false);
 * }
 * @func
 * @global
 * @readonly
 * @return {void}
 * @see oxygen_wh_template/ecp-en-new/resources/css/content-containers.css
 * @summary Dynamic padding-top of the main content container.
 */
const dynamicPaddingTopWhTopicBody = () => {
  if (whBreadcrumbStyles.display === 'none') {
    return;
  }

  whTopicBody.style.paddingTop = `${whBreadcrumb.clientHeight}px`;
};

$(document).ready(function() {
  /* treetable start */
  $('.treetable').length ? $('.treetable tbody tr').each(function() {
    var ttId = $(this).find('td:last-child span.ttid').text();
    var ttParentId = $(this).find('td:last-child span.ttparentid').text();

    ttId ? $(this).attr('data-tt-id', ttId) : null;
    ttParentId ? $(this).attr('data-tt-parent-id', ttParentId) : null;

  }) : null;

  $('.treetable').length ? $('.treetable').treetable({
    clickableNodeNames: true, expandable: true, expanderTemplate: '<span class="treetable__expander"></span>', indent: 27
  }).tablesorter({
    sortList: [[0, 0]]
  }) : null;
  /* treetable end */

  /* Sortable table start */
  var tables = $('th.sortable').closest('table');
  tables.find('th:not(.sortable)').data("sorter", false);
  tables.tablesorter();
  /* Sortable table end */

  if ($('.table.table_with_code').length) {

    $('.table.table_with_code').each(function () {
      $(this).find('th:last-child').prepend('<button type="button" class="expand_all_code"><span>Show all</span><span>Hide all</span></button>')
    });

    $('.expand_all_code').on('click', function () {
      var $codeWrapper = $(this).parents('.table-container').find('.div');

      if ($(this).hasClass('expanded')) {
        $codeWrapper.each(function () {
          $(this).removeClass('expanded');
        });
        $(this).removeClass('expanded');
      } else {
        $codeWrapper.each(function () {
          $(this).addClass('expanded');
        });
        $(this).addClass('expanded');
      }

    });

    $('.table.table_with_code tr td .div > span.ph.ph_Hide').on('click', function () {
      $(this).parents('.div').removeClass('expanded');
    });
    $('.table.table_with_code tr td .div > span.ph.ph_Show').on('click', function () {
      $(this).parents('.div').addClass('expanded');
    })

  }

  $("figure.fig.fig_hide").on('click', 'p.figcap', function() {
    $(this).toggleClass('active').siblings('.codeblock').slideToggle(300);
  });

  $("figure.fig.fig_hide").on('click', 'p.figcap', function() {
    $(this).parent().toggleClass('active');
    $(this).toggleClass('active').siblings('.ol').slideToggle(300);
    $(this).toggleClass('active').siblings('.ul').slideToggle(300);
    $(this).siblings('.p').slideToggle(300);
  });

  $("figure.fig.fig_show").on('click', 'p.figcap', function() {
    $(this).parent().toggleClass('active');
    $(this).toggleClass('active').siblings('.ol').slideToggle(300);
    $(this).toggleClass('active').siblings('.ul').slideToggle(300);
    $(this).siblings('.p').slideToggle(300);
  });

  $("figure.fig.fig_hide > ol.ol").prev().css("background-color", "#fff");
  $("figure.fig.fig_show > ol.ol").prev().css("background-color", "#fff");
  $("figure.fig.fig_hide > ul.ul").prev().css("background-color", "#fff");
  $("figure.fig.fig_show > ul.ul").prev().css("background-color", "#fff");

  if (whBreadcrumbStyles.display !== 'none') {
    dynamicPaddingTopWhTopicBody();
    window.addEventListener('resize', dynamicPaddingTopWhTopicBody, true);
  }

  $('a.xref').each(function () {
    $(this).prepend('<i></i>')
  });
  $('body').on('click', 'a.xref.nolink', function (e) {
    e.preventDefault();
    // do something
  });
  $('body').on('contextmenu', 'a.xref.nolink', function (e) {
    e.preventDefault();
    // do something
  });
  $('body').on('auxclick', 'a.xref.nolink', function (e) {
    e.preventDefault();
    // do something
  });
  $('body').on('click', 'a.xref.nolink_optional', function (e) {
    e.preventDefault();
    // do something
  });
  $('body').on('contextmenu', 'a.xref.nolink_optional', function (e) {
    e.preventDefault();
    // do something
  });
  $('body').on('auxclick', 'a.xref.nolink_optional', function (e) {
    e.preventDefault();
    // do something
  });
  $('.scroll-down-link, .scroll-up-link').click((e)=>{
    e.preventDefault();
    const id = new URL(e.currentTarget.href).hash.substring(1);
    const target = document.getElementById(id);
    const offset = target.offsetTop
    //document.getElementById(id).scrollIntoView({behavior: "smooth"});
    $('html, body').animate({
      scrollTop: (offset - 60)
    }, 500);
  });
});