$(document).ready(function () {
  const formSelector = ".router-filter form";
  $(formSelector).on("change", "input", function()
  {
    UpdateQueryParams();
  });
  $(formSelector).on("change", "select", function()
  {
    UpdateQueryParams();
  });

  $(formSelector + " input[value='Reset']").on("click", function()
  {
    window.location = window.location.origin + window.location.pathname;
  });

  // Check URL for filter form variables
  let searchParams = new URLSearchParams(window.location.search)
  const targetFields = ["FilterTags","DateFilterFrom","DateFilterTo","YearList"];

  if (searchParams.has("FilterTags"))
  {
    let fieldValue = searchParams.get("FilterTags")
    if (fieldValue != "")
    {
      let filterTagIds = fieldValue.split(",");
      filterTagIds.forEach(function (item, index) {
        $(formSelector + " input[name='FilterTags'][value='" + item + "']").prop("checked", true)
      });
    }
  }

  if (searchParams.has("DateFilterFrom"))
  {
    let fieldValue = searchParams.get("DateFilterFrom")
    if (fieldValue != "")
    {
      $(formSelector + " input[name='DateFilterFrom']").val(fieldValue)
    }
  }

  if (searchParams.has("DateFilterTo"))
  {
    let fieldValue = searchParams.get("DateFilterTo")
    if (fieldValue != "")
    {
      $(formSelector + " input[name='DateFilterTo']").val(fieldValue)
    }
  }

  if (searchParams.has("YearList"))
  {
    let fieldValue = searchParams.get("YearList")
    if (fieldValue != "" & fieldValue != "0")
    {
      $(formSelector + " select[name='YearList'] option[value='" + fieldValue + "']").prop('selected','selected');
    }
  }
});

function UpdateQueryParams()
{
  const targetFields = ["FilterTags","DateFilterFrom","DateFilterTo","YearList"];
  let data = {};
  const formData = new FormData( document.querySelector(".router-filter form") );
  const url = new URL(window.location);
  const params = new URLSearchParams(url.search);
  for (const fieldName of targetFields){
    const fieldValue = formData.getAll(fieldName);
    if (fieldValue != "" & fieldValue != 0 )
    {
      params.set(fieldName, fieldValue);
    }
  };
  history.pushState("", "","?" + params.toString());
};

$(function() {
	const isNumericInput = (event) => {
		const key = event.keyCode;
		return ((key >= 48 && key <= 57) || // Allow number line
			(key >= 96 && key <= 105) // Allow number pad
		);
	};

	const isModifierKey = (event) => {
		const key = event.keyCode;
		return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End
			(key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete
			(key > 36 && key < 41) || // Allow left, up, right, down
			(
				// Allow Ctrl/Command + A,C,V,X,Z
				(event.ctrlKey === true || event.metaKey === true) &&
				(key === 65 || key === 67 || key === 86 || key === 88 || key === 90)
			)
	};

	const enforceFormat = (event) => {
		// Input must be of a valid number format or a modifier key, and not longer than ten digits
		if(!isNumericInput(event) && !isModifierKey(event)){
			event.preventDefault();
		}
	};

	const formatToPhone = (event) => {
		if(isModifierKey(event)) {return;}

		const target = event.target;
		const input = event.target.value.replace(/\D/g,'').substring(0,10); // First ten digits of input only
		const areaCode = input.substring(0,3);
		const middle = input.substring(3,6);
		const last = input.substring(6,10);

		if(input.length > 6){target.value = `${areaCode}-${middle}-${last}`;}
		else if(input.length > 3){target.value = `${areaCode}-${middle}`;}
		else if(input.length > 0){target.value = `${areaCode}`;}
	};

	let inputElements = document.querySelectorAll('.phone-number-formatting');

	inputElements.forEach((item) => {
		item.addEventListener('keydown',enforceFormat);
		item.addEventListener('keyup',formatToPhone);
	});
});