import React, {Component} from 'react';

import MaterialLocalAutoComplete from 'src/MaterialLocalAutoComplete';
import Widget from 'src/Widget';
import WidgetHeader from 'src/WidgetHeader';
import Theme from 'src/Theme';

import PropTypeDescTable from 'components/PropTypeDescTable';
import MaterialLocalAutoCompleteDoc from 'examples/assets/propTypes/MaterialLocalAutoComplete.json';

export default class MaterialAutoCompleteFilterExamples extends Component {

    constructor(props) {

        super(props);

        this.data = ['test0', 'test1', {
            text: 'test2',
            value: 2,
            desc: 'Here is test2.',
            onTouchTap() {
                console.log('test2 selected!');
            }
        }, 'test3', 'test4', 'test5', {
            text: 'test6',
            value: 6,
            desc: 'Here is test6.',
            onTouchTap() {
                console.log('test6 selected!');
            }
        }, 'test7', 'test8', 'test9'];

        this.onChange = this::this.onChange;
        this.filterPressEnterHandle = this::this.filterPressEnterHandle;
        this.filterClearHandle = this::this.filterClearHandle;

    }

    onChange(item) {
        console.log('select item: ', item);
    }

    filterPressEnterHandle(value) {
        console.log('filter value: ', value);
    }

    filterClearHandle() {
        console.log('filter cleared');
    }

    render() {

        return (
            <div className="example material-auto-complete-examples">

                <h2 className="example-title">LocalAutoComplete</h2>

                <p>
                    A <span>LocalAutoComplete</span> is an interface to help users to complete their input.
                </p>

                <h2 className="example-title">Examples</h2>

                <Widget>

                    <WidgetHeader className="example-header" title="Basic"/>

                    <div className="widget-content">
                        <div className="example-content">

                            <div className="examples-wrapper">

                                <p><code>LocalAutoComplete</code> simple example.</p>

                                <MaterialLocalAutoComplete theme={Theme.HIGHLIGHT}
                                                           filterInitValue={'test'}
                                                           data={this.data}
                                                           label="Label"
                                                           placeholder="Please select ..."
                                                           onChange={this.onChange}
                                                           onFilterPressEnter={this.filterPressEnterHandle}
                                                           onFilterClear={this.filterClearHandle}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <h2 className="example-title">Properties</h2>

                <PropTypeDescTable data={MaterialLocalAutoCompleteDoc}/>

            </div>

        );
    }
};
@@ -41,37 +41,32 @@
 %0Aimport Material
-Local
 AutoComplete fro
@@ -61,16 +61,22 @@
 Complete
+Filter
  from 's
@@ -78,37 +78,32 @@
 om 'src/Material
-Local
 AutoComplete';%0Ai
@@ -98,16 +98,22 @@
 Complete
+Filter
 ';%0Aimpor
@@ -290,34 +290,9 @@
 ort 
-MaterialLocalAutoCompleteD
+d
 oc f
@@ -322,37 +322,32 @@
 opTypes/Material
-Local
 AutoComplete.jso
@@ -342,16 +342,22 @@
 Complete
+Filter
 .json';%0A
@@ -1524,19 +1524,22 @@
 -title%22%3E
-Loc
+Materi
 alAutoCo
@@ -1544,16 +1544,22 @@
 Complete
+Filter
 %3C/h2%3E%0A%0A 
@@ -1605,19 +1605,22 @@
 A %3Cspan%3E
-Loc
+Materi
 alAutoCo
@@ -1625,16 +1625,22 @@
 Complete
+Filter
 %3C/span%3E 
@@ -2098,19 +2098,22 @@
 p%3E%3Ccode%3E
-Loc
+Materi
 alAutoCo
@@ -2118,16 +2118,22 @@
 Complete
+Filter
 %3C/code%3E 
@@ -2186,37 +2186,32 @@
        %3CMaterial
-Local
 AutoComplete the
@@ -2202,24 +2202,30 @@
 AutoComplete
+Filter
  theme=%7BThem
@@ -2237,16 +2237,17 @@
 HLIGHT%7D%0A
+ 
         
@@ -2381,16 +2381,17 @@
         
+ 
 data=%7Bth
@@ -2399,16 +2399,17 @@
 s.data%7D%0A
+ 
         
@@ -2532,16 +2532,17 @@
         
+ 
 placehol
@@ -2565,16 +2565,17 @@
 ct ...%22%0A
+ 
         
@@ -2701,32 +2701,33 @@
                 
+ 
 onFilterPressEnt
@@ -2759,16 +2759,17 @@
 Handle%7D%0A
+ 
         
@@ -3091,34 +3091,9 @@
 ta=%7B
-MaterialLocalAutoCompleteD
+d
 oc%7D/

update MaterialAutoCompleteFilter examples