{{ define "autocomplete" }}
<style>
    /* If the autocomplete container is placed inside a table, that table must have the styling attribute of display: contents; to show all dropdown items */
    .autocomplete {
        position: relative;
        display: inline-block;
        width:fit-content;
        height: fit-content;
    }

    .autocomplete-items {
        position: absolute;
        border-bottom: none;
        border-top: none;
        z-index: 99 !important;
        /* Position the autocomplete items to be the same width as the container */
        top: 100%;
        left: 2px; /* Aligns the dropdown items to the input that triggers their appearance */
        right: 0;
        overflow-y:auto;
        max-height: 200px; /* Fixed height with scrollbar for dropdown items */
        background-color: var(--modal-bg);
        box-shadow: 5px 5px 4px var(--input-bg);
    }

    .autocomplete-items div {
        padding: 5px;
        cursor: pointer;
        color: var(--text-normal);
    }

    /* When hovering an item */
    .autocomplete-items div:hover {
        filter: brightness(1.25);
    }

    /* When navigating through the items using the arrow keys */
    .autocomplete-active {
        background-color: var(--selected) !important;
        color: var(--text-normal);
    }
</style>

<script>
    /**
     * This function creates an autocompleted dropdown list below the given HTML input element provided.  As a user inputs more letters into the
     * field, the dropdown items are filtered based on the new string.  It is suggested that the HTML entity have the attribute 'autocomplete'
     * set to 'off' to prevent the browser from creating a browser based autocomplete list.  This function requires the given HTML element to
     * be wrapped in a div with the class 'autocomplete'.  An example is below:
     *      <div class="autocomplete">
     *          <input id="fieldId" type="text" name="fieldName" autocomplete="off">
     *      </div>
     *
     * @param inputElement The HTML input element that will trigger the display of the autocomplete dropdown list
     * @param list An array of objects with the following properties
     *      {value: "Additional Meaning (perhaps an ID for object)", label: "Displayed Value", displayLabel: "overrides 'label' for display"},
     * @param selectionCallback Function with the following signature 'functionName(value, label)' that gets called upon selection of an item from
     *      the autocompleted dropdown list, or when focus is lost from the initial HTML input element.  If the focus on the HTML element is lost, the
     *      value argument will be 'null',
     * @param boldTextInput An optional argument which determines if the user inputted text shall be boldface to highlight the matching text in the dropdown
     * @param maxItems An optional argument which limits the max number of items in the dropdown.  If there are more items that space in the dropdown
     *      list, a vertical scroll bar is used.  If the argument is equal to 0, all items will be shown in the dropdown list.  10 is the standard value
     *      set by the Aura standard
     */
    function autocomplete(inputElement, list, selectionCallback, boldTextInput = true, maxItems = 10) {

        function getValueFromDisplayLabel(displayLabel) {
            for (let i = 0; i < list.length; i++) {
                if (list[i].displayLabel) {
                    if (displayLabel == list[i].displayLabel) {
                        return list[i].label;
                    }
                }
            }
            return displayLabel;
        }

        function getNameFromDisplayLabel(displayLabel) {
            for (let i = 0; i < list.length; i++) {
                let label = list[i].displayLabel || list[i].label;
                if (label == displayLabel) {
                    return list[i].value;
                }
            }
            return null;
        }

        function getElementId (id) {
            return id + "-autocomplete-list";
        }

        function keyHandler(e) {
            const KEYS = {
                UP: 38,
                DOWN: 40,
                ENTER: 13
            }
            let element = document.getElementById(getElementId(this.id));
            if (element) {
                element = element.getElementsByTagName("div");
            }
            if (e.keyCode == KEYS.DOWN) {
                // Increase the currentFocus variable
                currentFocus++;
                // And make the current item more visible
                addActive(element);
            } else if (e.keyCode == KEYS.UP) {
                // Decrease the currentFocus variable
                currentFocus--;
                // And make the current item more visible
                addActive(element);
            } else if (e.keyCode == KEYS.ENTER) {
                // Prevent the form from being submitted,
                e.preventDefault();
                if (currentFocus > -1) {
                    // And simulate a click on the "active" item
                    if (element) {
                        element[currentFocus].click();
                    }
                } else {
                    // simulate a blur event to enter in a value that the user is typing only
                    inputElement.blur();
                    changeHandler();
                    closeAllLists(inputElement);
                }
            }
        }

        function inputHandler () {
             // Close any already open lists of autocompleted values
            closeAllLists();
            currentFocus = -1;
            // Create a DIV element that will contain the items (values)
            let parentDiv = document.createElement("div");
            parentDiv.setAttribute("id", getElementId(this.id));
            parentDiv.setAttribute("class", "autocomplete-items");

            // Get the actual width of the input element that triggers the autocomplete dropdown
            let width = inputElement.getBoundingClientRect().width;
            parentDiv.setAttribute("style", "width: " + width + "px;");

            // Append the DIV element as a child of the autocomplete container
            this.parentNode.appendChild(parentDiv);
            const currentValue = getValueFromDisplayLabel(this.value);

            const maxLength = (maxItems == 0) ? list.length : Math.min(list.length, maxItems);
            let listLength = 0;
            for (let i = 0; i < list.length; i++) {

                let name = list[i].label;
                let id = list[i].value;

                // Check if the item starts with the same letters as the text field value
                if ((name.substring(0, currentValue.length).toUpperCase() == currentValue.toUpperCase()) ||
                    (list[i].displayLabel && list[i].displayLabel.substring(0, currentValue.length).toUpperCase() == currentValue.toUpperCase())) {
                    // Create a DIV element for each matching element
                    let dropdownItem = document.createElement("div");
                    dropdownItem.innerHTML = (boldTextInput === true) ? "<strong>" + name.substring(0, currentValue.length) + "</strong>" + name.substring(currentValue.length) : (name || list[i].displayLabel);

                    // Insert an input field that will hold the current array item's value
                    dropdownItem.innerHTML += "<input type='hidden' value='" + (name || list[i].displayLabel) + "' name='" + id + "'>";

                    // Execute a function when someone clicks on the item value (DIV element)
                    dropdownItem.addEventListener("click", function(e) {
                        // Insert the value for the autocomplete text field
                        // Note: Value is what is displayed in the input field, not the id of the item selected
                        const elementClicked = this.getElementsByTagName("input")[0];
                        inputElement.value = elementClicked.value;
                        inputElement.name = elementClicked.name;

                        if (typeof(selectionCallback) == "function") {
                            selectionCallback(elementClicked.name, getValueFromDisplayLabel(elementClicked.value));
                        }
                        // Close the list of autocompleted values, (or any other open lists of autocompleted values
                        closeAllLists();
                    });

                    parentDiv.appendChild(dropdownItem);
                    listLength++;
                    if (listLength >= maxLength) {
                        break;
                    }
                }
            }
        }

        const listeners = [
            {event: "input", "function": inputHandler},
            {event: "focus", "function": inputHandler},
            {event: "keydown", "function": keyHandler},
            {event: "focusout", "function": changeHandler},
        ];
        for (let i = 0; i < listeners.length; i++) {
            // Remove any event listeners that may already be attached to the input field to put new ones on it
            inputElement.removeEventListener(listeners[i].event, listeners[i].function);
            // Add an event listener to replace all that might have been added
            inputElement.addEventListener(listeners[i].event, listeners[i].function);
        }

        function changeHandler (e) {
            setTimeout(function () {
                if (typeof(selectionCallback) == "function") {
                    // Check to make sure the label is actually a valid value from an item in the list
                    let value = null;
                    let label = inputElement.value;
                    for (let i = 0; i < list.length; i++) {
                        if (label == list[i].label) {
                            value = list[i].value;
                            label = list[i].label;
                            break;
                        }
                    }
                    selectionCallback(getNameFromDisplayLabel(label), label);
                }
            }, 1000);
        }

        // The autocomplete function takes two arguments, the text field element and an array of possible autocompleted values
        let currentFocus;

        function addActive(dropdownItem) {
            // A function to classify an item as "active"
            if (!dropdownItem) {
                return false;
            }
            // Start by removing the "active" class on all items
            removeActive(dropdownItem);
            if (currentFocus >= dropdownItem.length) {
                currentFocus = 0;
            }
            if (currentFocus < 0) {
                currentFocus = (dropdownItem.length - 1);
            }
            // Add class "autocomplete-active"
            dropdownItem[currentFocus].classList.add("autocomplete-active");
        }

        function removeActive(dropdownItem) {
            // A function to remove the "active" class from all autocomplete items
            for (let i = 0; i < dropdownItem.length; i++) {
                dropdownItem[i].classList.remove("autocomplete-active");
            }
        }

        function closeAllLists(element) {
            // Close all autocomplete lists in the document, except the one passed as an argument
            let items = document.getElementsByClassName("autocomplete-items");
            for (let i = 0; i < items.length; i++) {
                if ((!element) || (element != items[i] && element != inputElement && items[i].id != getElementId(element.id))) {
                    items[i].parentNode.removeChild(items[i]);
                }
            }
        }

        document.addEventListener("click", function (e) {
            closeAllLists(e.target);
        });
    }
</script>
{{ end }}