//a single component from it's own file
import {strings} from '@htmlguyllc/jpack/es/strings';
strings.ucfirst('bob');

//or multiple components from jpack
import {strings, dom} from '@htmlguyllc/jpack';
strings.ucfirst('bob');
dom.exists('a.my-link');

//or a namespaced object containing all components
import * as j from '@htmlguyllc/jpack';
j.strings.ucfirst('bob');

var jpack = require('@htmlguyllc/jpack');

//now use it
jpack.strings.ucfirst('bob');

import {navigation} from '@htmlguyllc/jpack/es/navigation'; 

//handles browser back/forward buttons
navigation.initHistoryHandlers();

//a selector that contains the HTML you'd like to pull from the response
//the default is "body"
//if the response is a JSON object with an "html" key, it'll use the value of that
navigation.setIncomingElement('#main-content'); 

//a selector that will be replaced with the incoming HTML
//WARNING: If IncomingElement does not match, this will be overwritten by the IncomingElement after it's replaced 
// (since it presumably no longer exists at that point)
//by default it'll replace anything in "body"
navigation.setReplaceElement('#main-content');

//enables a loader to show if a request takes more than 300ms
//WARNING: No styling is provided at this time 
// It uses Bootstrap 4's progress-bar classes
navigation.loaderEnabled = true;
navigation.setLoaderDelay(300);

//things to do when a page loads
navigation.onLoad(function(e){
    var params = e.detail; //get info from the event
    //if a current_route meta was set in the incoming HTML, it'll be provided to you here
    //you can use this to kick off your page-specific JS
    var route = params.route; 
    //the data you set prior to loading the page, if any
    var data = params.data; //or navigation.getPassthroughData()
    //the DOM element that was added to the page replacing the previous
    var el = params.el;
    //el_selector is the IncomingElement selector that was used for this request
    var el_selector = params.el_selector;
    
    //replaced_selector is the ReplaceElement selector that was used for this request
    //Note: If el_selector does not match replaced_selector, ReplaceElement will be replaced with IncomingElement
    //It's done right after this callback and because it's assumed the ReplaceElement doesn't exist anymore
    //If there's a situation where it does and you need it to stay the same, just set it again in here
    //like this: navigation.setReplaceElement(params.replaced_selector);
    var replaced_selector = params.replaced_selector;
   
   //if gtag is set (google analytics), push a page view
   if( typeof gtag !== 'undefined' ) {
       gtag('config', 'GA_MEASUREMENT_ID', {
           page_path: request.getURIWithQueryString()
       });
   }
   
   //scroll to the top of the page
   window.scrollTo(0, 0);
   
   //.. do something...like init tooltip plugins
});

//things to do when leaving a page
navigation.onUnload(function(){
   //.. do something...like remove generic event handlers or destroy plugins 
});

//things to do when a page fails to load
navigation.onNavigationFailure(function(e){
    var error = e.detail.error;
    //.. do something...like show an error popup for the user or log the issue
});

//to prevent duplicate code, you can run your onload callbacks immediately
navigation.triggerOnLoad(dom.getElement('body'), 'body', navigation.getRouteFromMeta());

//now use the plugin to load pages
//if you're lazy, the fastest way to integrate is to just add data-href to all internal links 
//and then attach a handler like this:
import {events} from '@htmlguyllc/jpack/es/events';
events.onClick('[data-href]', function(){
   navigation.load(this.href); 
});

//set something that will be received onload of the next page
navigation.setPassthroughData({
    product_id:1
});

//you can use the load method at any time to load a new page 
// the second param is an optional callback that only runs for that page
navigation.load('/my-page', function(new_el, new_el_selector, pass_through_params){
    //my page is now loaded
    
    //new_el is the new element on the page
    //new_el_selector is the incomingSelector used for this request
    
    //pass_through_data is any data that was set on navigation prior to this request
    //so in this instance, it will be {product_id:1} (set above)
    
    //now clear that data so it's gone for the next page load
    navigation.clearPassthroughData();
});

//in some cases, you'll want to grab a different element from the URL
//this example grabs .popup-content from /my-popup and replaces .current-popup
navigation.load('/my-popup', function(new_el, el_sel, data){
   //now the new element is on the page
}, '.popup-content', '.current-popup');

import {XHRForm} from '@htmlguyllc/jpack/es/forms'; 

//shown with defaults
var remote_form = new XHRForm('form[name="my_form"]', {
        xhrSubmit: true, //wouldn't make a whole lotta sent to use this if this were false lol, but it's here for extending classes and incase you want to toggle it for whatever reason
        submitURL:null, //when null, the form's action will be used (if explicitly defined), otherwise it falls back to the URL the form was retrieved from
        submitMethod:null, //when null, the form's method will be used (if explicitly defined), otherwise it falls back to POST
        onError: function(error, response, form){ alert(error); }, //although you can add more, you can only pass 1 to start with in the constructor
        onSuccess: function(response, form){ //although you can add more, you can only pass 1 to start with in the constructor 
            if(typeof response.success === "string"){ alert(response.success); }
            else{ alert("Your submission has been received"); }
        },
        //validate the form, display any errors and return false to block submission
        validateForm: function(form){
            //add .was-validated for bootstrap to show errors
            form.classList.add('was-validated');
    
            //if there are any :invalid elements, the form is not valid
            const is_valid = !form.querySelector(':invalid');
    
            //if it's valid, clear the validation indicators
            if( is_valid ) form.classList.remove('was-validated');
    
            return is_valid;
        }
});

//attach the submission handler
remote_form.attachSubmitHandler();

import {FormFromURL} from '@htmlguyllc/jpack/es/forms'; 

//shown with defaults
var remote_form = new FormFromURL('/my-form', {
        incomingElementSelector: null, //when null, it assumes the entire response is the form's HTML
        insertIntoElement: null, //error on null, must provide this
        onload: function(form){ return this; }, //although you can add more, you can only pass 1 to start with in the constructor
        xhrSubmit: true, 
        submitURL:null, //when null, the form's action will be used (if explicitly defined), otherwise it falls back to the URL the form was retrieved from
        submitMethod:null, //when null, the form's method will be used (if explicitly defined), otherwise it falls back to POST        
        onError: function(error, response, form){ alert(error); }, //although you can add more, you can only pass 1 to start with in the constructor
        onSuccess: function(response, form){ //although you can add more, you can only pass 1 to start with in the constructor 
            if(typeof response.success === "string"){ alert(response.success); }
            else{ alert("Your submission has been received"); }
        }, 
        //validate the form, display any errors and return false to block submission
        validateForm: function(form){
            //add .was-validated for bootstrap to show errors
            form.classList.add('was-validated');
    
            //if there are any :invalid elements, the form is not valid
            const is_valid = !form.querySelector(':invalid');
    
            //if it's valid, clear the validation indicators
            if( is_valid ) form.classList.remove('was-validated');
    
            return is_valid;
        }
});

//grab the form and insert in into the "insertIntoElement"
remote_form.getForm();