import React from 'react/addons';
import Reflux from 'reflux';
import $ from 'jquery';
import wikiHomeStore from './wiki-home-store.jsx';
import util from '../utils/util.jsx';

import {urls} from '../constants.jsx';

export default React.createClass({
    render() {
        var li = [];
        var n = -1;
        if (!window.tagListsData && !window.treeListsData) {
            $.get(urls.tags, function (result) {
                window.tagListsData = result;
            } );
            $.get(urls.fileTree, function (result) {
                window.treeListsData = [result];
            } );
        }
        var tagLists = window.tagListsData;
        var treeLists = window.treeListsData;
        var matchTree = function (reg, resArr, treeList, parentPath) {
            parentPath = parentPath || '';
            treeList.forEach(function(one) {
                if (one instanceof Object && one.name.toLowerCase().match(reg) && one.index) {
                    resArr.push('<li data-index="' + one.index + '" data-path="' + one.path  + '" data-action="selectFileNode">' + one.name + '<br/><em>path:</em> ' + one.path + '/' + one.index + '</li>');
                }
                if (typeof one === 'string' && one.toLowerCase().match(reg)) {
                    resArr.push('<li data-index="' + one + '" data-path="' + parentPath + '" data-action="selectFileNode">' + one + '<br/><em>path:</em> ' + parentPath + '/' + one + '</li>');
                }
                if (one.children && one.children.length > 0) {
                    matchTree(reg, resArr, one.children, one.path)
                }
            })
            return resArr;
        }
        var matchMethod = function (reg) {
            var resArr = [];
            var tagKeys = Object.keys(tagLists);
            tagKeys.forEach(function(one){
                if (one.toLowerCase().match(reg) || tagLists[one].descr.toLowerCase().match(reg)) {
                    resArr.push('<li data-path="' + one + '" data-action="wikiLinkClicked">' + tagLists[one].descr + '<br/><em>tag:</em> ' + one + '</li>');
                }
            })
            resArr = matchTree(reg, resArr, treeLists);
            return resArr;
        }
        var matchResult = function (reg) {
            if (!reg) {
                $('#matchRes').html('').hide();
                return;
            } else {
                $('#matchRes').html('').show();
            }
            var resArr = matchMethod(reg);
            if (resArr.length === 0) {
                $('#matchRes').hide();
                return;
            }
            $('#matchRes').html('').append(resArr);
            $('#matchRes').on('click', function (e) {
                var $this = e.target;
                var path = $this.dataset['path'];
                var action = $this.dataset['action']
                $('#matchRes').hide();
                if (action === 'wikiLinkClicked') {
                    window.WikiActions.wikiLinkClicked({
                        tag: path
                    });
                }
                if (action === 'selectFileNode') {
                    window.WikiActions.selectFileNode({
                        index: $this.dataset['index'],
                        path: path
                    });
                }

                // location.replace(targetUrl);
            })
        };
        var searchFunc = function () {
            setTimeout(function () {
                n = -1;
                $('#matchRes').scrollTop(0);
            },100)
            var val = $('#searchInput').val();
            matchResult(val.toLowerCase());
        };
        var jumpToUrl = function () {
            if ($('.sidebar').scrollTop() < 1) {
                $('#matchRes li').eq(0).trigger('click');
            } else {
                $('.sidebar').scrollTop(0);
            }
        };
        var keydown = function (e) {
            e.stopPropagation();
            var len = $('#matchRes li').length - 1;
            if (e.keyCode === 40) {
                e.preventDefault();
                n++;
                if (n > len) {n = 0}
                $('#matchRes li').removeClass('li-hover');
                $('#matchRes').find('li').eq(n).addClass('li-hover');
                if ($('#matchRes .li-hover').offset().top > $('#matchRes').get(0).clientHeight) {
                    $('#matchRes').scrollTop($('#matchRes').scrollTop() + $('#matchRes .li-hover').get(0).clientHeight);
                }
                if (n === 0) {
                    $('#matchRes').scrollTop(0)
                }
            }
            if (e.keyCode === 38) {
                e.preventDefault();
                n--;
                if (n < 0) {
                    n = len;
                }
                $('#matchRes li').removeClass('li-hover');
                $('#matchRes').find('li').eq(n).addClass('li-hover');
                if ($('#matchRes .li-hover').offset().top < $('#matchRes .li-hover').get(0).clientHeight) {
                    $('#matchRes').scrollTop($('#matchRes').scrollTop() - $('#matchRes .li-hover').get(0).clientHeight);
                }
                if (n === len) {
                    $('#matchRes').scrollTop($('#matchRes .li-hover').offset().top)
                }
            }
            if (e.keyCode === 13) {
                var j = (n >= 0)?n:0;
                $('#matchRes').find('li').eq(j).trigger('click');
            }
        }
        var blurFunc = function () {
            setTimeout(function () {
                $('#matchRes').hide();
            },200)
        }
        return <div className="search-wrap">
                    <div className="input-wrap">
                        <input onChange={searchFunc} onFocus={searchFunc} onBlur={blurFunc} onKeyDown={keydown} id="searchInput" type="text" />
                        <em onClick={jumpToUrl}></em>
                    </div>
               <ul id="matchRes" style={{display:'none'}}></ul>
            </div>
    }
})