##required: catalogid, detail, view, fieldname
##optional: value, foreignkeyid and foreignkeyvalue

#set ($catalogidother = $context.getRequestParameter('catalogid'))
#if($catalogidother)
	#set ($catalogid = $catalogidother)
#end

#ifnull ($fieldname)
	#set ($fieldname = $context.getRequestParameter('fieldname')) ##lastmodified
#end
#set ($view = $context.getRequestParameter('view')) 
##we need to load up the existing detail object

#if( !$detail) ##this is new. To reduce complexity we want to just load up the detail all the time
	#if(!$searchtype)
		#set ( $searchtype = $context.getRequestParameter("searchtype") )
	#end
	#if( !$searchtype)
		searchtype not found!
	#end
	#set( $originalsearcher = $searcherManager.getSearcher($catalogid, $searchtype))
	#set ($fieldname = $context.getRequestParameter('fieldname')) ##lastmodified
	#set( $detail = $originalsearcher.getDetailForView($view, $fieldname, $user) )
#end

#set ($fieldname = $detail.id)
#set( $listid = $detail.getListId())
#set( $csslistid = "listdetail_$fieldname")

#set( $originalsearcher = $searcherManager.getSearcher($catalogid, $listid))

<div id="$csslistid" class="listdetailpicker  ">

#set( $lsearcher = $searcherManager.getSearcher( $detail.getListCatalogId(), $listid ))	

##require both 
#set ($listfilterid = $detail.get("listfilterid") )   ##local field that we depend on to get the value, get the value

#if( $listfilterid)
	#set( $listfilterdetail = $originalsearcher.getDetailForView($view, $listfilterid, $user) )
	
	<script type="text/javascript">
		addListListener("$listfilterid", "${fieldname}");
	</script>
	#set ($remotevalue = $context.getRequestParameter('foreignkeyvalue'))
	#if(!$remotevalue)
		#set( $remotevalue  = $data.get($listfilterid) )
	#end		
	#if(!$remotevalue)
		#set ($remotevalue = $context.replaceProperty($detail.defaultvalue) )  ##not used much
	#end
	#if( $remotevalue)
		#set($foreignkeyid = $detail.get("foreignkeyid") )   ##remove column that we search on. Use the value here
		#if( !$foreignkeyid)
			#set($foreignkeyid = $listfilterid)
		#end
		#set($query = $lsearcher.query().exact($foreignkeyid,$remotevalue).getQuery() )
	#end
#else
	#set($query = $lsearcher.query().all().getQuery() )
#end

#if($query)
	$query.setSortBy($detail.getDefaultSort())
#end

####$lsearcher.addShowOnly($context, $query) 
#set ($types = $lsearcher.search($context, $query))

#ifnull ($value)
	#set ($value = $context.getRequestParameter('val'))
#end
#ifnull ($value)
	#set ($value = $val)
#end
#ifnull ($value)
	#set ($value = $context.replaceProperty($detail.defaultvalue) )
#end

#set($searchfield = $detail.getId() )

#set( $valueid = "$fieldname" )
#if($types)
## Set large limit for available options
$types.setHitsPerPage(200)
#if($types && $types.size() > 200)
  #set($ajaxMode = true)
#end
#if($detail.get("autocomplete") == "true")
  #set($ajaxMode = true)
#end

#set($ajaxfield = "name")
#if($lsearcher.getDetail("description"))
  #set($ajaxfield = "description")
#end
$context.putPageValue("listresults", $types)


<div class="dropdown listdetailpicker" id="dropdown-$fieldname">
  <input type="hidden" name="${fieldname}.value" value="$!value" id="${fieldname}-value"/>

<button class="form-select w-100 text-start" type="button"
        data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">

  #set($selectedLabel = "[[Select]] $detail.getText($context)")
  #if($value)
    #set($selectedData = $mediaarchive.getData($listid, $value))
    #if($selectedData)
      #if($detail.render)
        #set($selectedLabel = $searcherManager.getValue($catalogid, $detail.render, $selectedData.properties))
      #else
        #set($selectedLabel = $selectedData.getName($context.getLanguage()))
      #end
    #end
    <strong>#esc($selectedLabel)</strong>
  #else
    #esc($selectedLabel)
  #end <span>X</span>
</button>


  <div class="dropdown-menu p-3 shadow-lg border w-100" style="max-height: 400px; overflow-y: auto;">
  <div class="d-flex justify-content-between align-items-center mb-2">
</div>
    <input type="text" class="form-control form-control-sm mb-3" data-typeahead
           placeholder="Search $detail.getText($context)"
           #if($ajaxMode)
             data-ajax-url="$apphome/components/xml/types/jtmxcomplete/tableresults.html?searchtype=$listid&field=$ajaxfield&operation=contains&${ajaxfield}.value="
             data-ajax-target="#dropdownlist-$fieldname"
           #else
           data-filter-target="#dropdownlist-$fieldname"
       #end
    />
    <div id="dropdownlist-$fieldname" class="list-group">
      $pages.include("$apphome/components/xml/types/jtmxcomplete/tableresults.html", $context)
    </div>
  </div>
</div>



#else
	[[No values found]] 
#end
 
  <div class="clearfix"></div>
</div>

<script 
  data-lazy 
  data-id="jtmxauto" 
  data-src="$apphome/components/xml/types/jtmxcomplete/autocomplete.js">
</script>



<script>
(function() {
  const debounce = (func, wait) => {
    let timeout;
    return function(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  };

  let currentIndex = -1;

  // AJAX mode search
  $(document).on("input", "input[data-ajax-url][data-ajax-target]", debounce(function () {
    const input = $(this);
    const url = input.data("ajax-url");
    const targetSelector = input.data("ajax-target");
    const list = $(targetSelector);
    const query = input.val();

    const finalUrl = url + encodeURIComponent(query);
    $.get(finalUrl, function (data) {
      list.html(data);
      currentIndex = -1;

      const hiddenVal = input.closest('.listdetailpicker').find('input[type="hidden"]').val();
      if (hiddenVal) {
        const matchRow = list.find(`.autocomplete-row[data-value="${hiddenVal}"]`);
        matchRow.addClass("active");
      }
    });
  }, 300));

  // Filter for non-AJAX
  $(document).on("input", "input[data-filter-target]", function () {
    const input = $(this);
    const filterText = input.val().toLowerCase();
    const targetSelector = input.data("filter-target");
    const list = $(targetSelector);
    const rows = list.find("tr.autocomplete-row");

    rows.each(function () {
      const row = $(this);
      const rowText = row.text().toLowerCase();
      const match = rowText.includes(filterText);
      row.toggle(match);
    });

    currentIndex = -1;

    const hiddenVal = input.closest('.listdetailpicker').find('input[type="hidden"]').val();
    if (hiddenVal) {
      const matchRow = list.find(`.autocomplete-row[data-value="${hiddenVal}"]`);
      matchRow.addClass("active");
    }
  });

  $(document).off("keydown.jtmx").on("keydown.jtmx", "input[data-typeahead]", function(e) {
	  const input = $(this);
	  const targetSelector = input.data("ajax-target") || input.data("filter-target");
	  const list = $(targetSelector);
	  const rows = list.find(".autocomplete-row:visible");

	  if (!rows.length) return;

	  if (e.key === "ArrowDown") {
	    e.preventDefault();
	    if (currentIndex === -1) {
		
	      const activeRow = rows.filter(".active").first();
	      currentIndex = rows.index(activeRow);
	      console.log("row: " + currentIndex);
	    }
	    currentIndex = (currentIndex + 1) % rows.length;
	    console.log("now: " + currentIndex);

	    rows.removeClass("active");
	    rows.eq(currentIndex).addClass("active");
	    rows.eq(currentIndex)[0].scrollIntoView({ block: "nearest" });

	  } else if (e.key === "ArrowUp") {
	    e.preventDefault();
	    if (currentIndex === -1) {
	      const activeRow = rows.filter(".active").first();
	      currentIndex = rows.index(activeRow)
	      console.log("row: " + currentIndex);;
	    }
	    currentIndex = (currentIndex - 1 + rows.length) % rows.length;
	    console.log("now: " + currentIndex);
	    rows.removeClass("active");
	    rows.eq(currentIndex).addClass("active");
	    rows.eq(currentIndex)[0].scrollIntoView({ block: "nearest" });

	  } else if (e.key === "Enter") {
	    e.preventDefault();
	    if (currentIndex >= 0 && currentIndex < rows.length) {
	      rows.eq(currentIndex).trigger("click");
	    }
	  }
	});



  // Show dropdown & reset filter
 $(document).on('shown.bs.dropdown', function (e) {
  const dropdown = $(e.target).closest('.dropdown');
  const input = dropdown.find('input[data-typeahead]').first();
  if (input.length) {
    input.val("");
    setTimeout(() => input.trigger("focus"), 10);

    const activeRow = dropdown.find('.autocomplete-row.table-primary');
    const visibleRows = dropdown.find('.autocomplete-row:visible');
      currentIndex = -1;
    

    const targetSelector = input.data("filter-target");
    if (targetSelector) {
      const target = $(targetSelector);
      target.find("tr.autocomplete-row").show();
    }
  }
});

  $(document).on('click', '.autocomplete-row', function () {
	  const row = $(this);
	  const value = row.data("value");
	  const label = row.data("label");
	  const picker = row.closest('.listdetailpicker');

	  // Update the hidden field and label
	  picker.find('input[type="hidden"]').val(value).trigger("change");
	  picker.find('[data-bs-toggle="dropdown"]').html(label);

	  // Remove previous highlight, add to selected
	  row.closest("tbody").find(".autocomplete-row").removeClass("table-primary active");
	  row.addClass("table-primary active");

	  // Close dropdown
	  const toggle = picker.find('[data-bs-toggle="dropdown"]')[0];
	  const dropdown = bootstrap.Dropdown.getOrCreateInstance(toggle);
	  if (dropdown) {
	    dropdown.hide();
	  }
	});
  
  $(document).on("click", "[data-clear-picker]", function () {
	  const picker = $(this).closest('.listdetailpicker');
	  picker.find('input[type="hidden"]').val("").trigger("change");

	  const toggle = picker.find('[data-bs-toggle="dropdown"]');
	  const placeholder = toggle.data("placeholder") || toggle.text().trim();
	  toggle.html(placeholder); // fallback if you want to reset to "Select..."

	  const dropdown = bootstrap.Dropdown.getOrCreateInstance(toggle[0]);
	  if (dropdown) {
	    dropdown.hide();
	  }
	});

  

})();
</script>