var searchBar_js = function (scope) {
    var $searchbar = scope.$searchbar;
    var $searchBtn = scope.$searchBtn;
    var removeBtn = '.' + scope.dropdownOption + ' .remove-btn';
    var searchWord = '.' + scope.searchWord;

    $(document).on('click', removeBtn, function () {
        $searchLi = $(this).closest('li');
        //如果刪除的搜尋推薦選項為歷史記錄(class為time)，才進行刪除 session storage 歷史記錄
        if ($searchLi.hasClass('time')) {
            let searchLiWord = $searchLi.find(searchWord).text();
            removeLocalKeyword(searchLiWord);
        }
        $searchLi.remove();
    });

    $searchbar.on('click', function () {
        if (window.sessionStorage["local"] != undefined)
            $(this).val(window.sessionStorage["local"]);
    });
    var key;
    var favoriteTags = new Array();

    var JSONfavoriteTags;
    var jsonkword = scope.jsonkword;

    var keywordArr = new Array();

    if (jsonkword != '') {
        JSONfavoriteTags = JSON.parse((jsonkword).replace(/"/g, '"'));
        $.each(JSONfavoriteTags, function (key, value) {
            favoriteTags.push(value["Word"]);
        });
    }

    var searchStorage = window.sessionStorage["local"];
    $(document).ready(function () {
        if (searchStorage != undefined && searchStorage != null) {
            $searchbar.val(searchStorage);
        }
    });

    $searchbar.on('keypress', function (event) {
        if (event.which == 13) {
            goSearch();
        }
    });

    $searchBtn.bind('click', function (e) {
        goSearch();
    });

    function clickSearch(Value) {
        getValue(Value);
        goSearch();
    }

    function getValue(Value) {
        $searchbar.val(Value);
    }

    function goSearch() {
        var searchurl = scope.searchurl;
        var searchresult = scope.searchresult;
        var query = $searchbar.val().trim();
        let isRepeatedQuery = checkKeyWordStorage(query);

        saveStorage(query);
        window.location.assign(searchurl + "?text=" + query + "&pagecurrentitem=" + searchresult + "&repeatedquery=" + isRepeatedQuery);
        showLoading();
    }

    function saveStorage(query) {
        window.sessionStorage["local"] = query;
    }

    $searchbar.on('input', function () {
        var ele = document.getElementById(scope.dropdownOption);
        while (ele.firstChild) {
            ele.removeChild(ele.firstChild);
            ele.firstChild = ele.firstChild;
        }
        if ($searchbar.val() != '' && $searchbar.val().length > 0 && $searchbar.val() != undefined) {
            let keywordArry = getLocalKeywordArry();
            keywordArry.forEach(keyword => {
                createSearchElement(ele, keyword, false); //產生歷史記錄選項
            })

            if (favoriteTags != null && favoriteTags.length > 0) {
                favoriteTags.forEach(function (value) {
                    createSearchElement(ele, value, true);
                });

                $(searchWord, ele).on('click', function () {
                    clickSearch($(this).data('search'));
                });
            }

            clearTimeout(key);
            key = setTimeout(function () { autocom(ele, $searchbar.val()) }, 500);
        }
    });

    //產生搜尋推薦選項元素
    //產生 autocomplete 推薦選項時 isRecommend 參數傳入 true，產歷史記錄選項時 isRecommend 參數傳入 false
    function createSearchElement(ele, value, isRecommend) {
        let liClass = 'time';
        if (isRecommend) {  //是否為 autocomplete，如果為生產搜尋歷史記錄則傳入 false
            liClass = 'search';
        }
        var keyword = $searchbar.val();
        var li = document.createElement("li");
        li.classList.add(liClass);
        var div = document.createElement("div");
        var regEx = new RegExp(keyword, "i"); //忽略大小寫(i)
        let highlightRecommend = highlightKeyword(value, regEx);
        div.innerHTML = highlightRecommend;
        div.classList.add(scope.searchWord);
        div.setAttribute("data-search", value);

        var btn = '<button class="remove-btn"><svg width="28" height="28" viewBox="0 0 28 28" fill="none"><title>close</title><path d="M6.44694 6.44694C7.04286 5.85102 8.00904 5.85102 8.60496 6.44694L21.5531 19.395C22.149 19.991 22.149 20.9571 21.5531 21.5531C20.9571 22.149 19.991 22.149 19.395 21.5531L6.44694 8.60496C5.85102 8.00904 5.85102 7.04286 6.44694 6.44694Z" fill="#999999" /><path d="M6.44694 21.5531C5.85102 20.9571 5.85102 19.991 6.44694 19.395L19.395 6.44694C19.991 5.85102 20.9571 5.85102 21.5531 6.44694C22.149 7.04286 22.149 8.00904 21.5531 8.60496L8.60495 21.5531C8.00903 22.149 7.04286 22.149 6.44694 21.5531Z" fill="#999999" /></svg></button>';
        li.appendChild(div);
        li.insertAdjacentHTML('beforeend', btn);
        ele.appendChild(li);
    }

    //將符合關鍵字的部分以藍色強調
    function highlightKeyword(recommend, regEx) {
        let recommendResult = recommend.replace(regEx, match => {
            return '<span class="highlight">' + match + '</span>'
        });
        return recommendResult;
    }

    //取得 session storage 內的 keyword 記錄
    function getLocalKeywordArry() {
        let localKeyWord = window.sessionStorage["localKeyWord"];
        let arry = localKeyWord ? JSON.parse(localKeyWord) : [];
        arry.reverse(); //將 session storage 中的記錄順序逆過來，才會是搜尋記錄的正確順序
        return arry.slice(0,3); //只取前3個記錄
    }

    //對歷史記錄點擊x後刪除 session storage 內的 keyword 記錄
    function removeLocalKeyword(keyword) {
        let localKeyWord = window.sessionStorage["localKeyWord"];
        let arry = localKeyWord ? JSON.parse(localKeyWord) : [];
        let keywordIndex = arry.indexOf(keyword);
        if (keywordIndex != -1) {
            arry.splice(keywordIndex, 1);
        }
        window.sessionStorage["localKeyWord"] = JSON.stringify(arry);
    }

    function autocom(ele, Value) {
        if (!Value) {
            return false;
        }
        var data = {
            queryText: Value,
            API: "suggest",
            acGroup: "Web",
            language: scope.language
        };

        $.ajax({
            type: "POST",
            url: '/home/web/Services/SearchResult/GetSuggest/',
            data: data,
            success: function (data) {
                if (data != null && data != '') {

                    var tags = new Array();

                    $.each(JSON.parse(data), function (key, value) {
                        var d = value['Query'];
                        tags[tags.length] = d;
                    })

                    if (tags.length > 0) {
                        tags.forEach(function (value) {
                            createSearchElement(ele, value, true);
                        });

                        $(searchWord).on('click', function () {
                            clickSearch($(this).data('search'));
                        });
                    }

                    if (favoriteTags != null && favoriteTags.length > 0) {
                        favoriteTags.forEach(function (value) {
                            createSearchElement(ele, value, true);
                        });

                        $(searchWord, ele).on('click', function () {
                            clickSearch($(this).data('search'));
                        });
                    }

                }
            },
            beforeSend: function () { }
        });
    }

    var e = jQuery.Event('keydown');
    e.keyCode = 8; // # Some key code value
    $searchbar.trigger(e);
}