import { debounce } from "https://esm.sh/throttle-debounce";

let count = 0;

document.addEventListener( 'DOMContentLoaded', function(){
  
  const form = document.getElementById('search-form');

  // Search Input Element
  const elSearchInput = document.getElementById( 'search-input' );
  
  // Debounce Checkbox Element
  const elDebounceCheckbox = document.getElementById( 'debounce-checkbox' );
  
  // Search term length preview
  const elSearchTermLengthInfo = document.getElementById( 'search-length' );

  // Search Term Processing
  const elSearchTerm = document.getElementById( 'current-search-item-preview' );
  
  // Count Element
  const elCount = document.getElementById( 'count' );

  elSearchInput.addEventListener( 'input', search );
  
  function fakeSearchAPICall( val ){
    if( val && val.length > 0 ){
      count++;
    } else {
      count = 0;
    }
    elCount.innerText = count;
  }
  
  const debounceFunc = debounce(
    500,
    (val) => {
      console.log( 'debounced' );
      fakeSearchAPICall(val);
    },
    { atBegin: false }
  );

  function search( e ){
    const inputVal = e.target.value;
    elSearchTerm.innerText = inputVal;
    
    if( elDebounceCheckbox.checked ){
      
      debounceFunc(inputVal);
      // fakeSearchAPICall(inputVal);
    } else {
      fakeSearchAPICall(inputVal);
    }
    
    // Search term length
    elSearchTermLengthInfo.innerText = inputVal.length;
    
  }
  
  // handle elReset click
  const elReset = document.getElementById( 'reset' );
  elReset.addEventListener( 'click', function(e){
    e.preventDefault();
    elSearchInput.value = '';
    count = 0;
    elCount.innerText = count;
    elSearchTermLengthInfo.innerText = e.target.value.length;
  } );
  
} )