'use strict';

jQuery( function() {
    // Get all the content-lists paginations a tags on the page.
    const contentListsPaginations = jQuery( '.hds-pagination--content-lists' );
    let paginationLinks = contentListsPaginations.find( 'a' );

    // Add click handlers to each of the a tags.
    addClickhandlers( paginationLinks );


    /**
     * Deletes the children of contentList and fadesIn
     * data.html in it's place.Also updates data-current-page to the
     * pageClicked.
     * 
     * @param data: data.html is formatted string of data to insert into the dom
     * @param contentList: Dom element that children will be erased and
     * 'data' will be inserted into as new children.
     * @param pageClicked: int value of the pagination page clicked on.
     *  
     */ 
    function updateBlockData( data, contentList, pageClicked ) {
        // Get all the children items and remove them from the dom.
        const children = jQuery( contentList ).children()
        jQuery( contentList ).children().remove();
        
        // Add the data from the api request.
        jQuery( contentList ).append( data.html ).hide().fadeIn(200); // phpcs:ignore WordPressVIPMinimum.JS.HTMLExecutingFunctions

        // Update the current-page data attribute in the content lists block.
        jQuery( contentList ).data( 'current-page', pageClicked );
        jQuery( contentList ).attr( 'data-current-page', pageClicked );
    }


    /**
     * Replaces the DOM content of parentNav in the DOM with new navigation.
     * And recreates the pagination on click handlers on it.
     * 
     * @param data: data.pagination is formatted string of data to insert into the dom
     * @param parentNav: Dom element that holds the pagination items.
     *  
     */
    function updatePagination( data, parentNav ) {    
        const rent = jQuery( parentNav ).parent();
        jQuery( parentNav ).replaceWith( data.pagination ); // phpcs:ignore WordPressVIPMinimum.JS.HTMLExecutingFunctions
        parentNav = rent.find( 'nav' );

        // Grab the Nav that just changed and add update click handlers.
        const thisPagination = jQuery( parentNav );
        const newPagination = jQuery( thisPagination ).find( 'a' );
        // Add click handlers to the new generated pagination links.
        addClickhandlers( newPagination );
    }


    /**
     *
     * Adds a click handler on all paginationLinks that grabs data from 
     * restEndpoint.endpoint and adds it to the dom. 
     * 
     * @param paginationLinks: list of dom items to add a click handler to
     */
    function addClickhandlers( paginationLinks ) {

        paginationLinks.each(function() {
            // if a function exists delete it.
            jQuery( this ).off("click");

            // add onclick handler.
            jQuery( this ).on( "click", function(e) {
                // prevent any default actions.
                e.preventDefault();
                e.stopPropagation();

                // Get nav parent and hds item sibling.
                const parentNav = jQuery( this ).parent().closest( 'nav' );
                const contentList = jQuery( parentNav ).prev( '.hds-content-items' );
                
                // Get data attributes.
                const postType = contentList.data( 'post-type' );
                const postId = contentList.data( 'post-id' );
                const maxPages = contentList.data( 'max-num-pages' );
                const perPage = contentList.data( 'per-page' );
                const categories = contentList.data( 'categories' );
                const newsTags = contentList.data( 'news-tags' );
                const layout = contentList.data( 'layout' );
                const showThumbnails = contentList.data( 'show-thumbnails' );
                const showReadTime = contentList.data( 'show-readtime' );
                const showExcerpts = contentList.data( 'show-excerpts' );
                const showContentTypeTags = contentList.data( 'show-content-type-tags' );
                
                // Get page number that is clicked.
                const pageClicked = jQuery( this ).data( 'page-number' );
    
                // Create json for api request.
                const _json = {
                    postType,
                    postId,
                    maxPages,
                    perPage,
                    categories,
                    newsTags,
                    layout,
                    showThumbnails,
                    showReadTime,
                    showExcerpts,
                    showContentTypeTags,
                    pageClicked
                }
                
                // Send api request.
                jQuery.get(
                    restEndpoint.endpoint,
                    _json,
                    function( data ){ 
                        updateBlockData( data, contentList, pageClicked );
                        updatePagination( data, parentNav );
                    },
                    'json' 
                )         
            });
        });
    }
});
;
// Run ECMAScript in strict mode.
'use strict';

jQuery( () => {

	// Check if the post-type-hdsnav is on the page.
	if ( ! jQuery( 'body' ).hasClass( 'post-type-hdsnav' ) ) {

		// If the secondary navigation "usa-accordion__button" is clicked, change "aria-expanded" to
		// true and remove "hidden" from the "usa-nav__submenu" item directly beneath it.
		jQuery(document).on( 'click', '.hds-secondary-navigation .usa-accordion__button', function() {

			// Before we do this, we need to close any other open submenus.
			// Any submenu that is not this one, and is open, should be closed.
			jQuery( '.hds-secondary-navigation .usa-accordion__button' ).not(this).attr( 'aria-expanded', 'false' );
			jQuery( '.hds-secondary-navigation .usa-accordion__button' ).not(this).next().attr( 'hidden', 'hidden' );

			// Now we can open the submenu that was clicked.
			// Toggle this in case the menu is already open.
			jQuery( this ).attr( 'aria-expanded', function(index, attr) {
				return attr === 'true' ? 'false' : 'true';
			});

			jQuery( this ).next( '.usa-nav__submenu' ).attr( 'hidden', function(index, attr) {
				return attr === 'hidden' ? null : 'hidden';
			});
		});

		// Let's make sure the .hds-secondary-navigation-menu-items is hidden but set to flex.
		jQuery( '.hds-secondary-navigation-menu-items' ).attr( 'hidden', 'hidden' );

		// If the user clicks on the mobile secondary nav trigger, let's open the mobile nav.
		jQuery(document).on( 'click', '.hds-secondary-nav-mobile-button', function() {

			// Add an "is-active" class to both.
			jQuery( this ).toggleClass( 'hds-active' );
			jQuery( '.hds-secondary-navigation-menu-items' ).toggleClass( 'hds-active' );

			// Slide toggle the secondary nav track.
			jQuery( '.hds-secondary-navigation-menu-items' ).slideToggle(300);

			// Toggle the "hidden" attribute on the "hds-secondary-nav-mobile" class.
			jQuery( '.hds-secondary-navigation-menu-items' ).attr( 'hidden', function(index, attr) {
				return attr === 'hidden' ? null : 'hidden';
			});

			// Now, toggle the "hds-secondary-nav-mobile-button" class to aria-expanded.
			jQuery( '.hds-secondary-nav-mobile-button' ).attr( 'aria-expanded', function(index, attr) {
				return attr === 'true' ? 'false' : 'true';
			}
			);
		});
	}
});
;