class searchLives {
    timer = 0;
    searchField = document.getElementById('search-fiedls');
    resultLives = document.getElementsByClassName('result-lives')[0];
    liveResultList = document.getElementsByClassName('live-result-list')[0];
    form = document.getElementsByClassName('form-to-send')[0];
    url = '';

    constructor(url, field) {
        this.url = url;

        this.removeList = this.removeList.bind(this);
        this.sendRequest = this.sendRequest.bind(this);
        this.results = this.results.bind(this);
        this.submitResults = this.submitResults.bind(this);
        if(field) {
            this.searchField = field;
        }

        if (this.searchField !== null) {
            this.searchField.addEventListener('keydown', this.searchResultsLive.bind(this));
            document.addEventListener('click', this.removeList);
        }
    }

    removeList(e) {
        if (!e.target.classList.contains('live-result-item')) {
            this.resultLives.classList.remove('active');
        }
    }

    results(result) {
        this.liveResultList.innerHTML = '';
        var liveResultList = this.liveResultList;
        var submitResults = this.submitResults;

        result.data.forEach(function (resultItem) {
            liveResultList.innerHTML += '<li class="live-result-item">' + resultItem.title + '</li>';
        });

        if (result.data.length > 0) {
            if (!this.resultLives.classList.contains('active')) {
                this.resultLives.classList.add('active');
            }
        } else {
            this.resultLives.classList.remove('active');
        }

        document.getElementsByClassName('live-result-list')[0].childNodes.forEach(function (node) {
            submitResults(node);
        });
    }

    submitResults(node) {
        var searchField = this.searchField;
        var resultLives = this.resultLives;
        var form = this.form;

        node.addEventListener('click', function (ev) {
            searchField.value = ev.target.innerHTML;
            resultLives.classList.remove('active');
            form.submit();
        });
    }

    sendRequest() {
        var results = this.results;
        axios.get(this.url + '?q=' + this.searchField.value).then(function (result) {
            results(result)
        });
    }

    searchResultsLive() {
        clearTimeout(this.timer);

        this.timer = setTimeout(this.sendRequest, 500);
    }
}