import jQuery from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from "isotope-layout";


// Add your custom JS here.
import "./_carousels";
import "./jssocials.min";

jQueryBridget( 'isotope', Isotope, $ );

jQuery( document ).ready(function($) {

// quick search regex
var qsRegex;

// init Isotope
var $grid  = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  filter: function() {
    return qsRegex ? $(this).text().match( qsRegex ) : true;
  }
});


var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};

// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
  qsRegex = new RegExp( $quicksearch.val(), 'gi' );
  $grid.isotope();
}, 200 ) );

// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout( timeout );
    var args = arguments;
    var _this = this;
    function delayed() {
      fn.apply( _this, args );
    }
    timeout = setTimeout( delayed, threshold );
  };
}



// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

 
            
            //****************************
            // Isotope Load more button
            //****************************
             
            var initShow = 3; //number of images loaded on init & onclick load more button
            var counter = initShow; //counter for load more button
            var iso = $grid.data('isotope'); // get Isotope instance
            console.log('iso');
            console.log(iso);
            console.log(iso.elemCount);
             
            loadMore(initShow); //execute function onload
           
            function loadMore(toShow) {
                
                $grid.find(".hidden").removeClass("hidden");
                
                var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
                  console.log('hiddenElem');
                  console.log(item.element);
                return item.element;
                });
                $(hiddenElems).addClass('hidden');
                $grid.isotope('layout');
                
                //when no more to load, hide show more button
                if (hiddenElems.length == 0) {
                $("#load-more").hide();
                } 
                else {
                $("#load-more").show();
                };
            
            }
            
            
            //append load more button
            $grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
            
            //when load more button clicked
             $(document).on("click", "#load-more", function(e) {
                e.preventDefault();
                
                if ($('#filters').data('clicked')) {
                //when filter button clicked, set initial value for counter
                counter = initShow;
                j$('#filters').data('clicked', false);
                } else {
                counter = counter;
                };
                
                counter = counter + initShow;
                
                loadMore(counter);
            });

});

var a = document.querySelector('.blur-image');

document.addEventListener("DOMContentLoaded", function () {
    if (!a) return !1;
    var b = a.getAttribute("data-src"),
        c = document.querySelector('.full-image'),
        img = new Image;

    img.src = b;

    img.onload = function () {

        c.classList.add('image-loaded'),
            c.style.backgroundImage = 'url(' + b + ')';
    };
});


document.addEventListener("DOMContentLoaded", function(){
    window.addEventListener('scroll', function() {
        if (window.scrollY > 57) {
          document.getElementById('main-nav').classList.add('fixed-top');
        } else {
          document.getElementById('main-nav').classList.remove('fixed-top');
        } 
    });
  }); 

  //Get the button
let mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (
    document.body.scrollTop > 20 ||
    document.documentElement.scrollTop > 20
  ) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

function backToTop() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}