(function ($) {
	var fields = ["MedicationName", "QuantityNeeded", "Dosage", "PetName", "Comments"];

	$(function() {

		$('.formRepeatPrescription').each(function () {
			var form = $(this);
			var practiceDropdown = form.find('.practiceDropdown select');
			var practiceNameHidden = form.find('.practiceNameHidden');
			var source = form.find('#clone-source');
			var target = form.find('#clone-wrapper');
			var button = form.find('#clone-button');
			var header = $('body > header');
			var index = 1;

			practiceDropdown.change(function () {
				var name = $(this).find('option:selected').text();
				practiceNameHidden.val(name);
			});

			button.click(function () {
				var clone = source.clone().attr('id', '');
				var labels = clone.find('label');
				var inputs = clone.find('input, select, textarea');

				// Loop through labels and update for attributes
				labels.each(function () {
					var label = $(this);
					fields.forEach((field) => {
						label.attr('for', label.attr('for').replace(field, field + "_" + index));
					});
				});

				// Loop through inputs and update id attributes
				inputs.each(function () {
					var input = $(this);
					fields.forEach((field) => {
						input.attr('id', input.attr('id').replace(field, field + "_" + index));
					});
					input.val('');
					input.parent().removeClass('medivetValidationFail');
					input.next('.medivetElementError').hide();
				});

				// Append clone to target
				target.append(clone);

				$('html, body').animate({
					scrollTop: parseInt(clone.offset().top - header.height())
				});

				index++;

				return false;
			});

		});

	});

	var originalGetCustomElementValue = epi.EPiServer.Forms.Extension.getCustomElementValue;
	var originalBindCustomElementValue = epi.EPiServer.Forms.Extension.bindCustomElementValue;
	var form = $('.formRepeatPrescription');

	// extend the EpiForm JavaScript API in ViewMode
	$.extend(true, epi.EPiServer.Forms, {

		// extend the Validator to validate Visitor's value in Clientside.
		Validators: {

			"Medivet.Domain.Validation.PrescriptionElementValidator": function(fieldName, fieldValue, validatorMetaData) {

				var requiredFields = ["MedicationName", "QuantityNeeded", "Dosage", "PetName"];
				var petObj = JSON.parse(fieldValue);
				var sections = form.find('#clone-wrapper > div');
				var isValid = true;

				sections.each(function (index) {
					var suffix = index > 0 ? '_' + index : '';

					requiredFields.forEach((field) => {
						var fieldId = field + suffix;
						var value = petObj[index][field];
						var fieldEl = $('[id$="' + fieldId + '"]', sections[index]);
						var wrapper = fieldEl.parent();
						var error = fieldEl.next('.medivetElementError');
						var errorMsgAttr = fieldEl[0].attributes['data-required-message'];
						var errorMsg = errorMsgAttr === undefined ? 'This field is required.' : errorMsgAttr.nodeValue;
						var failed = false;

						if (!value) {
							failed = true;
						}

						// Check if
						if (failed) {
							isValid = false;
							wrapper.addClass('medivetValidationFail');
							error.text(errorMsg).show();
						} else {
							wrapper.removeClass('medivetValidationFail');
							error.text('').hide();
						}

					});
				});

				return { isValid: isValid };
			}

		},

		CustomBindingElements: {

			"Medivet.Domain.Models.Blocks.PrescriptionElementBlock": function (elementInfo, val) {
				if (!val) {
					return;
				}
				var petObj = JSON.parse(val);
				var petString = '';
				var sections = $('.formRepeatPrescription').find('#clone-wrapper > div');

				sections.each(function (index) {
					var suffix = index > 0 ? '_' + index : '';

					fields.forEach((field, fIndex) => {
						var prefix = index > 0 || fIndex > 0 ? ', ' : '';
						var fieldId = field + suffix;
						petString += prefix + fieldId + '|' + petObj;
					});
				});

				return petString;
			}

		},

		Extension: {

			// OVERRIDE, process to get value from prescription element
			getCustomElementValue: function ($element) {

				if ($element.hasClass("FormPrescriptionElement")) {

					var sections = $element.find('#clone-wrapper > div');
					var output = [];

					sections.each(function (index) {
						var suffix = index > 0 ? '_' + index : '';
						var sectionObj = {};

						fields.forEach((field) => {
							var fieldId = field + suffix;
							var value = $('[id$="' + fieldId + '"]').val();
							if (value) {
								sectionObj[field] = value;
							}
						});

						output.push(sectionObj);
					});

					return JSON.stringify(output);
				}

				// if current element is not our job, let others process
				return originalGetCustomElementValue.apply(this, [$element]);
			},

			// OVERRIDE, custom binding data for prescription element
			bindCustomElementValue: function ($element, val) {

				if ($element.hasClass('FormPrescriptionElement')) {

					var sections = $element.find('#clone-wrapper > div');

					sections.each(function (index) {
						var suffix = index > 0 ? '_' + index : '';
						var data = JSON.parse(val);

						fields.forEach((field) => {
							var fieldId = field + suffix;
							$element.find('[id$="' + fieldId + '"]').val(data[fieldId]);
						});
					});

					return;
				}

				// if current element is not our job, let others process
				return originalBindCustomElementValue.apply(this, [$element, val]);
			}

		}
	});

	$$epiforms(".formRepeatPrescription").on("formsStepValidating", function (event) {
		if (event.isValid == true) {
			return;
		}

		var firstError = form.find('.medivetValidationFail, .ValidationFail').first();
		var header = $('body > header');

		$('body, html').animate({
			scrollTop: parseInt(firstError.offset().top - header.height())
		});

	});

})($$epiforms || $);