import React, {Component} from 'react';
import _ from 'lodash';

import '../styles/suggest.css';


class Suggest extends Component {
    keyboardActiveItem = null;

    showList = [];

    changeHandler(e) {
        this.keyboardActiveItem = null;
        this.props.suggestInput(_.trim(e.target.value));
    }

    clickSuggestHandler(e) {
        this.keyboardActiveItem = null;
        if (e.target.dataset.key) {
            this.props.suggestCheck(e.target.dataset.key);
        }
    }

    clickSearchHandler() {
        this.keyboardActiveItem = null;
        if (this.refs['textInput'].value) {
            this.props.suggestSearch(_.trim(this.refs['textInput'].value));
        }
    }

    keydownHandler(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            if (this.keyboardActiveItem === null) {
                // trigger search
                this.props.suggestSearch(_.trim(e.target.value));
                this.refs['textInput'].blur();
            } else {
                // trigger detail
                this.keyboardActiveItem = null;
                if (this.refs['suggList'] && this.refs['suggList'].querySelectorAll('li.active').length > 0) {
                    this.props.suggestCheck(this.refs['suggList'].querySelectorAll('li.active')[0].dataset.key);
                }
            }

        } else if (e.key === 'ArrowDown' && this.showList.length) {
            e.preventDefault();
            if (this.keyboardActiveItem === null) {
                this.keyboardActiveItem = 0;
            } else {
                this.keyboardActiveItem = (this.keyboardActiveItem + 1) % this.showList.length;
            }

        } else if (e.key === 'ArrowUp' && this.showList.length) {
            e.preventDefault();
            if (this.keyboardActiveItem === null) {
                this.keyboardActiveItem = -1;
            } else {
                this.keyboardActiveItem = (this.keyboardActiveItem - 1) % this.showList.length;
            }

        } else {
            this.keyboardActiveItem = null;
        }

        if (this.keyboardActiveItem !== null) {
            this.markSugguestItem(this.keyboardActiveItem >= 0 ? this.keyboardActiveItem : this.keyboardActiveItem + this.showList.length);
        }
    }

    markSugguestItem(index) {
        if (index !== null) {
            this.clearSuggestMark();
            this.refs['suggList'].querySelectorAll('li')[index].className = 'active';
        }
    }

    clearSuggestMark() {
        if (this.refs['suggList'] && this.refs['suggList'].querySelectorAll('li.active').length) {
            this.refs['suggList'].querySelectorAll('li.active').forEach(function(ele) {
                ele.className = '';
            });
        }
    }

    clearInput() {
        this.refs['textInput'].value = '';
        this.props.suggestInput('');
    }

    renderList(listData) {
        if (listData && listData.length > 0) {
            return (
                <ul onClick={this.clickSuggestHandler.bind(this)} ref="suggList">
                    {
                        listData.map(function(data, idx) {
                            return (
                                <li key={idx} data-key={data.key}>{data.obj.cnName} {data.obj.binomial}</li>
                            );
                        })
                    }
                </ul>
            );
        }
    }

    render() {
        this.showList = _.cloneDeep(this.props.matched);

        if (this.props.matched !== null) {
            this.showList = this.showList.slice(0, this.props.suggLength || 10);
        }

        this.clearSuggestMark();

        return (
            <div className="Suggest">
                <div className="Suggest-input-container">
                    <input type="text" placeholder="请输入物种名..." onKeyDown={this.keydownHandler.bind(this)} onChange={this.changeHandler.bind(this)} onClick={this.changeHandler.bind(this)} ref="textInput" />
                    <button onClick={this.clickSearchHandler.bind(this)}>&#8629;</button>
                    <a onClick={this.clearInput.bind(this)}>&#215;</a>
                    {
                        this.renderList(this.showList)
                    }
                </div>
            </div>
        );
    }
}

export default Suggest;
@@ -126,16 +126,32 @@
 onent %7B%0A
+    eles = %7B%7D;%0A%0A
     keyb
@@ -582,27 +582,27 @@
    if (this.
-ref
+ele
 s%5B'textInput
@@ -658,27 +658,27 @@
 _.trim(this.
-ref
+ele
 s%5B'textInput
@@ -960,35 +960,35 @@
            this.
-ref
+ele
 s%5B'textInput'%5D.b
@@ -1114,35 +1114,35 @@
        if (this.
-ref
+ele
 s%5B'suggList'%5D &&
@@ -1139,35 +1139,35 @@
 gList'%5D && this.
-ref
+ele
 s%5B'suggList'%5D.qu
@@ -1253,27 +1253,27 @@
 tCheck(this.
-ref
+ele
 s%5B'suggList'
@@ -2394,35 +2394,35 @@
            this.
-ref
+ele
 s%5B'suggList'%5D.qu
@@ -2526,27 +2526,27 @@
    if (this.
-ref
+ele
 s%5B'suggList'
@@ -2551,27 +2551,27 @@
 t'%5D && this.
-ref
+ele
 s%5B'suggList'
@@ -2629,19 +2629,19 @@
    this.
-ref
+ele
 s%5B'suggL
@@ -2801,19 +2801,19 @@
    this.
-ref
+ele
 s%5B'textI
@@ -3044,18 +3044,49 @@
 ref=
-%22suggList%22
+%7B(ele) =%3E %7Bthis.eles%5B'suggList'%5D = ele;%7D%7D
 %3E%0A  
@@ -3994,19 +3994,50 @@
 ref=
-%22textInput%22
+%7B(ele) =%3E %7Bthis.eles%5B'textInput'%5D = ele;%7D%7D
  /%3E%0A

change ref to callback