import React, {Component} from 'react';

import LocalAutoComplete from 'src/LocalAutoComplete';
import Widget from 'src/Widget';
import WidgetHeader from 'src/WidgetHeader';

import PropTypeDescTable from 'components/PropTypeDescTable';
import doc from 'assets/propTypes/LocalAutoComplete.json';

class LocalAutoCompleteExamples extends Component {

    constructor(props) {

        super(props);

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

        this.state = {
            uniqueData: []
        };

    }

    onChange = value => {
        console.log('changed value: ', value);
    };

    filterPressEnterHandler = value => {
        console.log('filter value: ', value);
    };

    filterClearHandler = () => {
        console.log('filter cleared');
    };

    filterUniqueData = uniqueData => {
        return this.data.filter(item => !uniqueData.includes(item));
    };

    onUniqueChange = (key, value) => {
        const {uniqueData} = this.state;
        uniqueData[key] = value;
        this.setState({
            uniqueData
        });
    };

    render() {

        const {uniqueData} = this.state,
            filteredData = this.filterUniqueData(uniqueData);

        return (
            <div className="example">

                <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>

                                <LocalAutoComplete data={this.data}
                                                   placeholder="Please select ..."
                                                   minFilterLength={0}
                                                   onChange={this.onChange}
                                                   onFilterPressEnter={this.filterPressEnterHandler}
                                                   onFilterClear={this.filterClearHandler}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

                    <WidgetHeader className="example-header" title="With mode"/>

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

                            <div className="examples-wrapper">

                                <p>
                                    <code>LocalAutoComplete</code> with default select mode, <code> normal</code>
                                    , <code>checkbox</code>, <code>radio</code> applied.
                                </p>

                                <LocalAutoComplete popupStyle={{maxHeight: 300}}
                                                   data={this.data}
                                                   placeholder="Please select ..."
                                                   onChange={this.onChange}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <p>Set the <code>disabled</code> property to true,the <code>LocalAutoComplete</code>
                                    will disabled.</p>

                                <LocalAutoComplete popupStyle={{maxHeight: 300}}
                                                   disabled={true}
                                                   data={this.data}
                                                   placeholder="Please select ..."
                                                   onChange={this.onChange}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

                    <WidgetHeader className="example-header" title="Custom No Matched Message"/>

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

                            <div className="examples-wrapper">

                                <p>Set the <code>noMatchedMsg</code> property for no matched message.</p>

                                <LocalAutoComplete popupStyle={{maxHeight: 300}}
                                                   noMatchedMsg="There have no matched value."
                                                   data={this.data}
                                                   renderer={data => {
                                                       return data && typeof data === 'object' ?
                                                           `${data.text} (${data.value})`
                                                           :
                                                           `${data} (${data})`;
                                                   }}
                                                   placeholder="Please select ..."
                                                   onChange={this.onChange}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <LocalAutoComplete popupStyle={{maxHeight: 300}}
                                                   data={filteredData}
                                                   value={uniqueData[0] || null}
                                                   placeholder="Please select ..."
                                                   onChange={value => this.onUniqueChange(0, value)}/>

                                <LocalAutoComplete popupStyle={{maxHeight: 300}}
                                                   data={filteredData}
                                                   value={uniqueData[1] || null}
                                                   placeholder="Please select ..."
                                                   onChange={value => this.onUniqueChange(1, value)}/>

                                <LocalAutoComplete popupStyle={{maxHeight: 300}}
                                                   data={filteredData}
                                                   value={uniqueData[2] || null}
                                                   placeholder="Please select ..."
                                                   onChange={value => this.onUniqueChange(2, value)}/>

                            </div>

                        </div>
                    </div>

                </Widget>

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

                <PropTypeDescTable data={doc}/>

            </div>

        );
    }
};

export default LocalAutoCompleteExamples;
@@ -1203,16 +1203,17 @@
 eData = 
+(
 uniqueDa
@@ -1214,16 +1214,31 @@
 iqueData
+, excludeIndex)
  =%3E %7B%0A  
@@ -1271,17 +1271,32 @@
 ter(
-i
+dataI
 tem =%3E
+%0A           
  
-!
 uniq
@@ -1306,22 +1306,85 @@
 ata.
+f
 in
-cludes(item)
+dIndex((item, index) =%3E index !== excludeIndex && item == dataItem) === -1
 );%0A 
@@ -1629,70 +1629,8 @@
 tate
-,%0A            filteredData = this.filterUniqueData(uniqueData)
 ;%0A%0A 
@@ -6700,36 +6700,60 @@
       data=%7B
+this.
 filter
-edData
+UniqueData(uniqueData, 0)
 %7D%0A          
@@ -6898,32 +6898,103 @@
 ase select ...%22%0A
+                                                   minFilterLength=%7B0%7D%0A
                 
@@ -7215,36 +7215,60 @@
       data=%7B
+this.
 filter
-edData
+UniqueData(uniqueData, 1)
 %7D%0A          
@@ -7413,32 +7413,103 @@
 ase select ...%22%0A
+                                                   minFilterLength=%7B0%7D%0A
                 
@@ -7738,20 +7738,44 @@
 ta=%7B
+this.
 filter
-edData
+UniqueData(uniqueData, 2)
 %7D%0A  
@@ -7928,32 +7928,103 @@
 ase select ...%22%0A
+                                                   minFilterLength=%7B0%7D%0A
                 

update LocalAutoCompleteExamples