(function ($, Drupal, drupalSettings, tippy) {

  'use strict';

  Drupal.behaviors.tooltipbehavior = {
    terms: [],
    initTippy: function() {
      // Tippy attributes and style
      tippy('.taxonomy-tooltip-tip', {
        delay: 100,
        arrow: true,
        arrowType: 'round',
        size: 'large',
        duration: 500,
        animation: 'scale'
      });
    },
    attach: function (context, settings) {

      var $tooltipElements = $('abbr[title]');
      var seen = {};

      // Reg form term highlighting with Tippy
      $.getJSON( "/terms.json", function( terms ) {

        Drupal.behaviors.tooltipbehavior.terms = terms;

        // loop through each <label> that contains each form question
        $('.control-label p').each(function() {
          // store the current state of the label
          var label = this.innerHTML;

          // loop through each term and see if we should replace any part of the question...
          $.each(terms, function(term,definition) {
            // create the tooltip HTML we want to replace it with...
            var tooltip = '<abbr class="taxonomy-tooltip-tip" data-tippy-content="'+definition+'" tabindex="0">'+term+'</abbr>';

            // replace the label only if it finds the term between <abbr> tags
            label = label.replace('<abbr>' + term + '</abbr>', tooltip);
          });

          // set the innerHTML of the labels we looped over to whatever label has
          this.innerHTML = label;

        });

        Drupal.behaviors.tooltipbehavior.initTippy();

      });

      // Add tooltip class for tippy styles
      $tooltipElements.addClass('taxonomy-tooltip-tip');

      $tooltipElements.each(function() {

        // Get title from taxonomy and replace with data-tippy-content
        var $t = $(this);

        $t.attr({
            'data-tippy-content': $t.attr('title').trim(),
        })
          .removeAttr('title');
      });

      Drupal.behaviors.tooltipbehavior.initTippy();
    }
  }
})(jQuery, Drupal, drupalSettings, tippy);