/**
 * @file
 * Javascript functionality for component jump to.
 */

let treeParams,pathNumber=1,allLinks=[],strokeWidth="5px",strokeColor="#000000";function treeMaker(t,e){let r=document.getElementById(e.id);treeParams=void 0===e.treeParams?{}:e.treeParams,void 0!==e.link_width&&(strokeWidth=e.link_width),void 0!==e.link_color&&(strokeColor=e.link_color),pathNumber=1,allLinks=[];const n=document.createElement("div");n.id="tree__svg-container",r.appendChild(n);const s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.id="tree__svg-container__svg",n.appendChild(s);const o=document.createElement("div");o.id="tree__container",r.appendChild(o);const i=document.createElement("div");i.classList="tree__container__step__card",i.id="tree__container__step__card__first",o.appendChild(i);const a=void 0!==treeParams[Object.keys(t)[0]]&&void 0!==treeParams[Object.keys(t)[0]].trad?treeParams[Object.keys(t)[0]].trad:Object.keys(t)[0].trad;i.innerHTML=`<p class="tree__container__step__card__p" id="card_${Object.keys(t)[0]}">${a}</p>`,addStyleToCard(treeParams[Object.keys(t)[0]],Object.keys(t)[0]),iterate(t[Object.keys(t)[0]],!0,"tree__container__step__card__first"),connectCard(),document.querySelectorAll(".tree__container__step__card__p").forEach(t=>{t.addEventListener("click",function(t){"function"==typeof e.card_click&&e.card_click(t.target)})}),window.onresize=function(){n.setAttribute("height","0"),n.setAttribute("width","0"),connectCard()}}function connectCard(){const t=document.getElementById("tree__svg-container__svg");for(let e=0;allLinks.length>e;e++)connectElements(t,document.getElementById(allLinks[e][0]),document.getElementById(allLinks[e][1]),document.getElementById(allLinks[e][2]))}function iterate(t,e,r){const n=document.getElementById("tree__svg-container__svg"),s=document.createElement("div");s.classList.add("tree__container__branch",`from_${r}`),document.getElementById(r).after(s);for(const o in t){const i=void 0!==treeParams[o]&&void 0!==treeParams[o].trad?treeParams[o].trad:o;if(document.getElementById(`card_${o}`)||(s.innerHTML+=`<div class="tree__container__step"><div class="tree__container__step__card" id="${o}"><p id="card_${o}" class="tree__container__step__card__p">${i}</p></div></div>`,addStyleToCard(treeParams[o],o)),r&&!e||e){const t=document.createElementNS("http://www.w3.org/2000/svg","path");t.id="path"+pathNumber,t.setAttribute("stroke",strokeColor),t.setAttribute("fill","none"),t.setAttribute("stroke-width",strokeWidth),n.appendChild(t),allLinks.push(["path"+pathNumber,r||"tree__container__step__card__first",o]),pathNumber++}Object.keys(t[o]).length>0&&iterate(t[o],!1,o)}}function addStyleToCard(t,e){if(void 0!==t&&void 0!==t.styles){let r=document.getElementById("card_"+e);for(const n in treeParams[e].styles)r.style[n]=t.styles[n]}}function signum(t){return t<0?-1:1}function absolute(t){return t<0?-t:t}function drawPath(t,e,r,n,s,o){let i=parseFloat(e.getAttribute("stroke-width"));t.getAttribute("height")<o&&t.setAttribute("height",o),t.getAttribute("width")<r+i&&t.setAttribute("width",r+i),t.getAttribute("width")<s+i&&t.setAttribute("width",s+i);let a=.15*(s-r),d=.15*(o-n),c=d<absolute(a)?d:absolute(a),_=0,l=1;r>s&&(_=1,l=0),e.setAttribute("d","M"+r+" "+n+" V"+(n+c)+" A"+c+" "+c+" 0 0 "+_+" "+(r+c*signum(a))+" "+(n+2*c)+" H"+(s-c*signum(a))+" A"+c+" "+c+" 0 0 "+l+" "+s+" "+(n+3*c)+" V"+o)}function connectElements(t,e,r,n){const s=document.getElementById("tree__svg-container");if(r.offsetTop>n.offsetTop){const t=r;r=n,n=t}const o=s.offsetTop,i=s.offsetLeft;drawPath(t,e,r.offsetLeft+.5*r.offsetWidth-i,r.offsetTop+r.offsetHeight-o,n.offsetLeft+.5*n.offsetWidth-i,n.offsetTop-o)}

(function ($, Drupal) {

  'use strict';

  Drupal.componentJumpTo = Drupal.componentJumpTo || {};
  Drupal.behaviors.jump_to = {
    attach: function (context) {
      Drupal.componentJumpTo.jump_to(context);
    }
  }
  Drupal.componentJumpTo.jump_to = function (context) {
    const $jump_to =  $(once('jumpToItems', '.component-builder.component-item--type-jump-to', context));
    if ($jump_to.length > 0) {
      const widthContent = $('.field--name-field-jump-to').width();
      const $title = $('.component-wrapper-jump-to-group-4 > h2 > div').text();
      const $component_wrapper = $('.component-builder.component-wrapper.component-wrapper--type-jump_to');
      const jumpToPosition = $component_wrapper.offset();
      $('.field--name-field-jump-to').prepend('<div class="field--name-title">' + $title + '</div>');
      $(".jump-back").click(function() {
        $([document.documentElement, document.body]).animate({
          scrollTop: jumpToPosition.top-$(window).height()/2
        }, 1000);
      });
        $jump_to.each(function () {
        const $this = $(this);

        const $id = $this.find('.field--name-field-id-jump-to');
        const $item1 = $('#toolbar-bar');
        const $item2 = $('#toolbar-item-administration-tray');
        const $item3 = $('.component-item--type-fixed-topbar');



        let previousHeihgt = 0;
        if ($item1.outerHeight() > 0) {
          previousHeihgt += $item1.outerHeight();
        }
        if ($item2.outerHeight() > 0) {
          previousHeihgt += $item2.outerHeight();
        }
        if ($item3.outerHeight() > 0) {l
          previousHeihgt += $item3.outerHeight();
        }
        window.onscroll = function () {
          checkTop(widthContent)
        };
        const $item_to_top = $('.component-wrapper--type-jump_to').offset().top - previousHeihgt + 10;
        function checkTop(widthContent) {
          if (document.documentElement.scrollTop > $item_to_top) {
            $('.component-wrapper--type-jump_to').addClass('stick');
            var status = false;
            if($('.styles--jump-to-position--left').length || $('.styles--jump-to-position--right').length) {
              status = checkShowScrollHeight();
            }
            if($('.styles--jump-to-position--top').length || $('.styles--jump-to-position--bottom').length) {
              status = checkShowScrollWidth(widthContent);
            }
            if(status == true) {
              $('.navigation-to-id--wrapper-button').show();
            }
            $('.jump-back').css('display','block');
            // $('.stick').css('top', previousHeihgt);
          }
          else {
            $('.component-wrapper--type-jump_to').removeClass('stick');
            $('.field--name-field-jump-to').css('margin-right', '');
            $('.field--name-field-jump-to').css('margin-top', '');
            $('.field--name-field-jump-to').css('margin-left', '');
            $('.field--name-field-jump-to').css('margin-bottom', '');
            $('.jump-back').css('display','none');
            $('.navigation-to-id--wrapper-button').hide();
          }
        }
        function checkShowScrollWidth (widthContent) {
          const count_item = $('.field--name-field-jump-to > div').length;
          let sum_width_item = 0;
          for (let i = 0; i < count_item; i++) {
            let $width_item = $('.field--name-field-jump-to > div').eq(i).width();
            sum_width_item += $width_item + 15;
          }
          const windowWidth = window.innerWidth;
          if (widthContent < sum_width_item) {
            return true;
          }
          else {
            return false;
          }
        }
        function checkShowScrollHeight() {
          let sum_height_item = 0;
          if ($('.site-header__initial').length) {
            sum_height_item += $('.site-header__initial').height();
          }
          for (let i = 0; i < count_item; i++) {
            let $width_item = $('.field--name-field-jump-to > div').eq(i).height();
            sum_height_item += $width_item + 10;
          }
          const windowHeight = window.innerHeight;
          if (windowHeight < sum_height_item) {
            return true;
          }
          else {
            return false;
          }
        }
        const count_item = $('.field--name-field-jump-to > div').length;
        let total_width_item = 0;
        function MoveRight(n) {
          if (n > count_item - 2) {
            $this.find('#prev').addClass('hidden-button');
            $('.field--name-field-jump-to').css('margin-left', total_width_item);
            $('.field--name-field-jump-to').attr('attr-left-value', n);
          }
          else {
            const $width_item = $('.field--name-field-jump-to > div').eq(n - 1).width();
            total_width_item -= $width_item;
            $('.field--name-field-jump-to').css('margin-left', total_width_item);
            $('.field--name-field-jump-to').attr('attr-left-value', n);
          }
        }

        function MoveLeft(n) {
          if (n == 0) {
            $('.field--name-field-jump-to').css('margin-left', 0);
            $('.field--name-field-jump-to').attr('attr-left-value', n);
            total_width_item = 0;
          }
          else {
            const $width_item = $('.field--name-field-jump-to > div').eq(n).width();
            total_width_item += $width_item;
            $('.field--name-field-jump-to').css('margin-left', total_width_item);
            $('.field--name-field-jump-to').attr('attr-left-value', n);
          }
        }

        let total_height_item = 0;
        function MoveTop(n) {
          if (n == 0) {
            $('.field--name-field-jump-to').css('margin-top', 0);
            $('.field--name-field-jump-to').attr('attr-top-value', n);
            total_height_item = 0;
          }
          else {
            const $height_item = $('.field--name-field-jump-to > div').eq(n).height();
            total_height_item += $height_item;
            $('.field--name-field-jump-to').css('margin-top', total_height_item);
            $('.field--name-field-jump-to').attr('attr-top-value', n);
          }
        }

        function MoveBottom(n) {
          if (n == 0) {
            $('.field--name-field-jump-to').css('margin-top', 0);
            $('.field--name-field-jump-to').attr('attr-top-value', n);
            total_height_item = 0;
          }
          else {
            const $height_item = $('.field--name-field-jump-to > div').eq(n - 1).height();
            total_height_item -= $height_item;
            $('.field--name-field-jump-to').css('margin-top', total_height_item);
            $('.field--name-field-jump-to').attr('attr-top-value', n);
          }
        }

        let attr_left_value = 0;

        if ($('.styles--jump-to-position--top').length || $('.styles--jump-to-position--bottom').length) {
          $('.prev').click(function () {
            if (attr_left_value > 0){
              MoveLeft(attr_left_value -= 1);
            }
            else {
              attr_left_value = 0;
              MoveLeft(attr_left_value);
            }
          });

          $('.next').click(function () {
            if (attr_left_value < count_item - 2) {
              MoveRight(attr_left_value += 1);
            }
          });
        }

        if ($('.styles--jump-to-position--left').length || $('.styles--jump-to-position--right').length) {
          $('.prev').click(function () {
            if (attr_left_value > 0){
              MoveTop(attr_left_value -= 1);
            }
            else {
              attr_left_value = 0;
              MoveTop(attr_left_value);
            }
          });

          $('.next').click(function () {
            MoveBottom(attr_left_value += 1);
          });
        }

        const n = $id.length;
        const $get_id = $id.text();
        for (let i=0; i < n; i++) {
          $this.find('.link-jump-to').eq(i).attr('href', '#' + $get_id);
        }
      })
    }
  }

})(jQuery, Drupal);
