/**
 * Edit Woobuilder
 *
 * @package Woostify Pro
 */

'use strict';

var woostifyAddNewBuilderAddon = function() {
	var addNewButton = document.querySelector( '.page-title-action' );
	if ( ! addNewButton ) {
		return;
	}

	addNewButton.onclick = function( e ) {
		var template = document.querySelector( '.woostify-add-new-template-builder' );
		if ( ! template ) {
			return;
		}

		e.preventDefault();

		var closeBtn = template.querySelector( '.woostify-add-new-template-close-btn' );

		// Show dialog template.
		template.classList.add( 'active' );

        var template_type = template.querySelector('.woostify-add-new-template-type');
        var custom_template_type = template.querySelector('.woostify-add-new-custom-template-type');

        template_type.onchange = function ( e ) {  
            let type = this.options[this.selectedIndex].value;
            if ( type === 'woostify_builder_custom_template' ) {
                custom_template_type.setAttribute('required','required');
                custom_template_type.style.display = 'block';
            }else{
                custom_template_type.removeAttribute('required','');
                custom_template_type.style.display = 'none';
            }
        }

		// Close via button.
		if ( closeBtn ) {
			closeBtn.onclick = function() {
				template.classList.remove( 'active' );
			}
		}

		// Close via ESC key.
		document.body.addEventListener(
			'keyup',
			function( e ) {
				if ( 27 === e.keyCode ) {
					template.classList.remove( 'active' );
				}
			}
		);

		// Close via overlay.
		template.onclick = function( e ) {
			if ( this !== e.target ) {
				return;
			}

			template.classList.remove( 'active' );
		}

		return;

		// Ajax.
		var sumbit     = template.querySelector( '.woostify-add-new-template-form-submit' ),
			nonce      = template.querySelector( 'input[name="_wpnonce"]' ),
			nonceValue = nonce ? nonce.value : '';

		if ( ! sumbit ) {
			return;
		}
	}
}

var quickViewPopup = function( event ) {
	event.preventDefault();
	var self = this;
	self.classList.add( "requesting" );
	self.classList.add('loading');
	// Request.
    var request = new Request(
        woostifyBuilderData.url,
        {
            method: 'POST',
            body: 'action=woostify_advanced_layout_quick_preview&post_id=' + self.dataset.layout_id + '&nonce=' + woostifyBuilderData.quick_view_nonce,
            credentials: 'same-origin',
            headers: new Headers(
                {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
                }
            )
        }
    );

	fetch(request).then(
        function (res) {
            if (200 !== res.status) {
                console.log('Status Code: ' + res.status);
                return;
            }
	
            res.json().then(
                function (r) {
                    
                    if (!r.success) {
                        return;
                    }

                    var data = r.data;
        
                    if ('' !== data) {
                        // console.log( data );
						self.classList.remove('loading');
						var template = wp.template( 'woostify-modal-view-layout-details' );
						document.body.style.overflow = 'hidden';
						document.querySelector( ".woostify-custom-layout-preview-wrapper" ).innerHTML = template( data );
                    }
                }
            )
        }
    );
	
}

document.addEventListener(
	'DOMContentLoaded',
	function() {
		woostifyAddNewBuilderAddon();

		
        var quickViewSelector = document.querySelectorAll('.advanced_hook_data_trigger');
		if ( quickViewSelector.length != 0 ) {
			quickViewSelector.forEach(function (ele) {
				ele.addEventListener(
					'click',
					quickViewPopup,
					true
				)
			});
		}

        document.addEventListener( 'click', function(e) {
            if( e.target && e.target.id === 'modal-close-link' ) {
                document.body.style.overflow = 'auto';
                document.querySelector( ".woostify-custom-layout-preview-wrapper" ).innerHTML = '';
            }
        });

	}
);