// keep it fresh
console.clear();

/*------------------------------------*\
	::Inline Form
\*------------------------------------*/
var inlineForm = {

	// orchestrate the form
	init: function(){
		// cache variables
		inlineForm.$form = $('#js-inline-form');
		inlineForm.$wpcf7 = inlineForm.$form.parents('.wpcf7');
		inlineForm.$labels = inlineForm.$form.find('.inline-form__label');
		inlineForm.$inputs = inlineForm.$form.find('.inline-form__input');
		inlineForm.$inputWraps = inlineForm.$form.find('.inline-form__input-wrap');
		inlineForm.$submit = inlineForm.$form.find('.inline-form__submit');

		// start running
		inlineForm.wpcf7FixType();
		inlineForm.createLabels();
		inlineForm.bindAddValue();
		inlineForm.bindFocus();
		inlineForm.handleInvalid();
	},

	// identify selected field by class
	createLabels: function(){
		// on each input
		inlineForm.$inputs.each(function(){
			// get the jQuery and basic node objects
			var $thisInput = $(this);
			var inputNode = $thisInput[0];
			// when focus is added
			inputNode.addEventListener('focus', function(){
				// only add .active to current label
				inlineForm.$labels.removeClass('active');
				$thisInput
					.parent('.inline-form__input-wrap')
					.prev('.inline-form__label')
					.addClass('active');
			});
		});
		// on click of each label
		inlineForm.$labels.on('click', function(){
			// set focus on the next input node
			$(this)
				.next('.inline-form__input-wrap')
				.find('.inline-form__input')[0]
					.focus();
		});
	},

	// add focus on empty contenteditable's
	bindFocus: function(){
		// for each wrapper of the inputs
		inlineForm.$inputWraps.each(function(){
			// cache this and the input node inside
			var $this = $(this);
			var inputNode = $this.find('.inline-form__input')[0];
			// set focus on wrap click to input node inside
			$this.on('click touchstart', function(){
				inputNode.focus();
			});
		});
	},

	// add contenteditable values to inputs
	bindAddValue: function(){
		inlineForm.$inputs.each(function(){
			// cache
			var $this = $(this);
			var $thisWrap = $this.parent();
			var inputNode = $this[0];

			// find the hidden input for this contenteditable
			var $matchingInput = inlineForm
				.$form
				.find('[name="'+$this.attr('aria-labelledby')+'"]');

			// when contenteditable loses focus then add value to hidden input
			inputNode.addEventListener('blur', function(){
				$matchingInput.val($this.html());
			});

			// when contenteditable gains focus
			inputNode.addEventListener('focus', function(){
				// remove any errors
				$thisWrap.removeClass('error');
				// if the form was invalid
				if(inlineForm.$form.hasClass('invalid') || inlineForm.$form.hasClass('failed')){
					// if there are no more errors then identify as such
					if(inlineForm.$form.find('.error').length == 0){
						inlineForm.$form.removeClass('invalid failed');
						inlineForm.$submit.val('Try again!').prop('disabled', false);
					}
				}
			});
		});
	},

	// handle invalid form submissions
	handleInvalid: function(){

		// when wpcf7 reports invalid
		inlineForm.$wpcf7.on('wpcf7:invalid', function(){

			// get ready to store the error block
			var $err = null;

			// show errors
			var showError = function(){
				// look through each error in the list
				$err.each(function(){
					// parse the text to get the offending field's name
					var txt = $(this).text();
					var txtArr = txt.split(':');
					var inputName = txtArr[0].substring(5, txtArr[0].length);
					// add an error class
					$('#'+inputName).next('.inline-form__input-wrap').addClass('error');
					// identify errors on the button
					inlineForm.$submit.val('Can\'t send with errors...').prop('disabled', true);
				});
			}

			// look for the error block
			var checkErr = function(){
				// try to find the block with its li's
				$err = $('.screen-reader-response').find('li');
				// if it's not there yet
				if($err.length == 0 || $err.hasClass('error-msg')){
					// recursively call to look again
					setTimeout(function(){
						checkErr();
					}, 250)
				// if it's there then parse the errors
				} else {
					$err.addClass('error-msg');
					showError();
				}
			}
			checkErr();

		});
	},

	// fix required type of type=email for email field
	wpcf7FixType: function(){
		$('#js-wpcf7-req-email').replaceWith('<input type="hidden" name="email" value="" class="wpcf7-form-control wpcf7-hidden">');
	},
};

jQuery(function($){
	inlineForm.init();
});

// ignore: quick dirty mimic of wpcf7 plugin's php-side functionality
jQuery(function($){
    $('#js-inline-form').on('submit', function(e){
        e.preventDefault;
        
        var $form = $(this);
        var $inputs = $form.find('[type="hidden"]');
        var $wpcf7 = $form.parents('.wpcf7');
        var $resp = $wpcf7.find('.screen-reader-response');
        var err = [];
        
        $inputs.each(function(){
            var val = $(this).val();
            var title = $(this).attr('name');
            if('' == val){
                err.push('Your '+title+': you can\'t leave this blank.');
            } else if ('email' == title && val.indexOf('@') === -1) { // much more in-depth in my php version
                err.push('Your '+title+': this doesn\'t look accurate.');
            }
        });
        
        if(err.length > 0){
            $form.addClass('invalid');
            $wpcf7.trigger('wpcf7:invalid');
            var errHTML = '<ul>';
            for(var i = 0; i < err.length; i++){
                errHTML +=('<li>'+err[i]+'</li>');
            }
            errHTML += '</ul>';
            $resp
                .html('Oops! Looks like we\'ve got errors...'+errHTML);
        } else {
            $form.removeClass('invalid').addClass('sent');
            $resp.html('Sent. Thanks!');
        }

        return false; // don't ever send in this codepen example...
    });
});