var _ = require('./_.js');
let $ = jQuery;


// Jquery plugin 'autocomplete'
// This code will show ghost text of the first matching suggestion for autocompleting a textbox out of provided
// words 'words'.
$.fn.xyz_autocomplete = function (options) {
    var settings = $.extend({
        words: []
    }, options);

    var suggestWord = function (input, words) {
        var typedValue = input.val().toLowerCase().split(' ').pop();
        if (typedValue === '') {
            return '';
        }

        for (var i = 0; i < words.length; i++) {
            if (words[i].toLowerCase().indexOf(typedValue) === 0) {
                return words[i].substr(typedValue.length);
            }
        }
        return '';
    };

    return this.each(function () {
        var $input = $(this);
        var $suggestion = $('<span class="auto-complete-suggestion"></span>');

        $input.after($suggestion);

        var inputComputedStyle = window.getComputedStyle($input.get(0));

        $suggestion.css({
            'pointer-events': 'none',
            'position': 'absolute',
            'max-width': $input.innerWidth(),
            'overflow': 'hidden',
            'white-space': 'nowrap',
            'font': $input.css('font'),
            'padding-left': parseFloat(inputComputedStyle.getPropertyValue('padding-left')) + 1 + parseFloat(inputComputedStyle.getPropertyValue('border-left-width')),
        });

        var updateSuggestion = function () {
            var suggestedText = suggestWord($input, settings.words);
            if (suggestedText !== '' && $input.val().length > 2) {
                var typedValue = $input.val();
                var zeroOpacityText = '<span style="opacity: 0;">' + typedValue + '</span>';
                $suggestion.html(zeroOpacityText + suggestedText);
                $('body > span:last-child').remove();
                $suggestion.css({
                    'top': ($input.position().top + $input.outerHeight() / 2 - $suggestion.outerHeight() / 2) + 'px',
                    'left': ($input.position().left) + 'px',
                });
            } else {
                $suggestion.text('');
            }
        };

        $input.on('input', updateSuggestion);

        // Add keydown event listener to handle the Tab key
        $input.on('keydown', function (e) {
            if (e.keyCode === 9) { // Tab key
                e.preventDefault(); // Prevent the default tab key behavior (switching focus)
                var suggestedText = $suggestion.text();
                if (suggestedText !== '') {
                    $input.val(suggestedText); // Replace the text in the $input element with the suggestion
                    $suggestion.hide();
                    $input.blur();
                    $input.focus();
                }
            }
        });

        $input.on('focus', function () {
            $suggestion.show();
            updateSuggestion();
        });

        $input.on('blur', function () {
            var suggestedText = $suggestion.text();
            if (suggestedText !== '') {
                $input.val(suggestedText); // Replace the text in the $input element with the suggestion
            }
            $suggestion.hide();
        });

        $input.on('resize', function () {
            $suggestion.css('max-width', $input.innerWidth() - 2);
        });
    });
};