function getKeyByValue(obj, value) {
    return Object.keys(obj).find(key => obj[key] === value);
}

function objectByString(obj, str) {
	return str.split('.').reduce(function(prev, curr) {
	        return prev ? prev[curr] : undefined
	    }, obj || self)
}

const autocomplete = (function() {
    let keyCodes = {
        'ARROW_DOWN': 40,
        'ARROW_UP': 38,
        'TAB': 9,
        'ENTER': 13,
        'ESC': 27
    };
    
    const updateResults = (settings) => {
        let { userValue, data, filterBy } = settings;
        
        let searchTextClean = userValue.toLowerCase();
        let searchWords = searchTextClean.split(' ');
        
        let filteredItems = data.filter((item) => {
            let itemString = item;
            
            if (typeof itemString == 'object') {
                itemString = objectByString(item, filterBy);
            }
            
            let itemValue = itemString.toLowerCase();

            return searchWords.every((word) => itemValue.includes(word));
        });
        
        const results = filteredItems.map(item => settings.item(item));
        let resultsContainer = settings.resultsContainer;
        
        resultsContainer.innerHTML = '';
        
        if (!results.length) {
            return resultsContainer.classList.add('hide-list');
        }
        
        resultsContainer.classList.remove('hide-list');
        
        results.forEach(item => resultsContainer.innerHTML += item);
        
        return resultsContainer;
    }
    
    const incrementHighlightedItem = (action, resultItems, activeItem, activeIndex) => {
        if (
            (resultItems.length == (activeIndex + 1) && action == 'ARROW_DOWN') ||
            (activeIndex == 0 && action == 'ARROW_UP')
           ) {
            return true;
        }
        
        let newIndex = action == 'ARROW_UP' ? activeIndex - 1 : activeIndex + 1;
        
        activeItem.classList.remove('highlight');
        
        return resultItems[newIndex].classList.add('highlight');
    };
    
    const handleInputEvents = (e, settings) => {
        if (e.target.value.length < 3) {
            return settings.resultsContainer.classList.add('hide-list');
        }
        
        let action = getKeyByValue(keyCodes, e.keyCode);
        
        settings.resultsContainer.classList.remove('hide-list');
        settings.userValue = e.target.value;
        
        let resultItems = Array.from(settings.resultsContainer.children);
        let activeItem = false;
        
        if (resultItems.length) {
            activeItem = resultItems.filter(item => item.classList.contains('highlight'))[0];
        }
        
        switch (action) {
            case 'TAB':
            case 'ARROW_UP':
            case 'ARROW_DOWN':
                if (!activeItem) {
                    return resultItems[0].classList.add('highlight');
                }
                
                let activeIndex = resultItems.indexOf(activeItem);

                return incrementHighlightedItem(action, resultItems, activeItem, activeIndex);

                break;
                
            case 'ESC':
                settings.resultsContainer.innerHTML = '';
                settings.resultsContainer.classList.add('hide-list');
                
                return false;
                
                break;
                
            case 'ENTER':
                if (!activeItem) {
                    activeItem = resultItems[0];    
                }
                
                let anchor = activeItem.tagName == 'a' ? activeItem : activeItem.querySelector('a');
                
                return anchor.click();
                
                break;
                
            default:
                return updateResults(settings);
        }   
    }
    
    const render = (item, settings) => {
        const input = item.querySelector('.autocomplete-input');
        const list = item.querySelector('.autocomplete-list');
        
        settings.resultsContainer = list;
        settings.resultsContainer.classList.add('hide-list');
        
        input.addEventListener('keyup', (e) => (
            handleInputEvents(e, settings)
        ));
        
        input.addEventListener('focusin', (e) => ( 
            handleInputEvents(e, settings) 
        ));
        
        input.addEventListener('focusout', (e) => (
            settings.resultsContainer.classList.add('hide-list')
        ));
    };
    
    return (args = {}) => {
        let settings = Object.assign({}, {
            'element': [],
            'data': {},
            'filterBy': 'title',
            'item': function(title = {}) {
                return (
                    '<li class="list-item">' + 
                        '<a href="http://google.com">' + title + '</a>' +
                    '</li>'
                );
            }
        }, args);
        
        return settings.element.forEach((item) => render(item, settings));
    };
}());

let sampleData = [
  {
    name: 'John Smith',
    title: 'Explorer',
    image: 'https://www.nps.gov/jame/learn/historyculture/images/jsmith-apva.jpg'
  },
  {
    name: 'John Bradford',
    title: 'Prebendary',
    image: 'https://upload.wikimedia.org/wikipedia/en/a/aa/John_Bradford.jpg'
  },
  {
    name: 'John Bonham',
    title: 'Drummer',
    image: 'https://www.thefamouspeople.com/profiles/images/john-bonham-3.jpg'
  },
];

let simpleSampleData = ['john d smith', 'jane a doe', 'john jacob jingleheimer', 'apple', 'pie'];

let test = autocomplete({
    element: document.querySelectorAll('.autocomplete'),
    data: sampleData,
    filterBy: 'name',
    item: function(item) {
        return (
            '<li class="list-item">' + 
                '<a href="http://google.com" class="cf">' + 
                    '<img src="' + item.image + '" />' +
                    '<span class="name">' + item.name + '</span>' +
                    '<span class="title">' + item.title + '</span>' +
                '</a>' +
            '</li>'
        );
    }
});