import React, {Component} from 'react';

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

import PropTypeDescTable from '../PropTypeDescTable';
import DropdownSelectDoc from 'assets/propTypes/DropdownSelect.json';

import 'sass/containers/app/modules/fields/DropdownSelectExamples.scss';

export default class DropdownSelectExamples 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.groupedData = [{
            name: 'socialNetwork',
            children: [{
                iconCls: 'fa fa-facebook',
                text: 'Facebook',
                desc: 'Here is a Facebook Desc.'
            }, {
                iconCls: 'fa fa-twitter',
                text: 'Twitter',
                desc: 'Here is a Twitter Desc.'
            }, {
                iconCls: 'fa fa-google-plus',
                text: 'Google+',
                desc: 'Here is a Google+ Desc.'
            }]
        }, {
            name: 'device',
            children: [{
                iconCls: 'fa fa-android',
                text: 'Android',
                desc: 'Here is a Android Desc.'
            }, {
                iconCls: 'fa fa-apple',
                text: 'Apple',
                desc: 'Here is a Apple Desc.'
            }, {
                iconCls: 'fa fa-windows',
                text: 'Windows',
                desc: 'Here is a Windows Desc.'
            }]
        }];

        this.onChange = this::this.onChange;

    }

    onChange(value) {
        console.log(value);
    }

    render() {

        return (
            <div className="example drop-down-select-examples">

                <h2 className="example-title">Dropdown Select</h2>

                <p>
                    <span>Dropdown Select</span> use to store operating elements. Click on the contact
                    and a drop-down menu will appear. You can select from the list and execute the appropriate command.
                </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>Dropdown Select</code> simple example.</p>

                                <div className="field-group">

                                    <DropdownSelect data={this.data}
                                                    onChange={this.onChange}/>

                                </div>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <p>Set the <code>autoClose</code> property to false,the select list will not close when
                                    choose one item.</p>

                                <div className="field-group">

                                    <DropdownSelect theme={Theme.PRIMARY}
                                                    data={this.data}
                                                    autoClose={false}
                                                    onChange={this.onChange}/>

                                </div>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <div className="field-group">

                                    <p>Set the <code>filter</code> property to true,the DropdownSelect will have user
                                        search input.</p>

                                    <DropdownSelect data={this.data}
                                                    autoClose={false}
                                                    useFilter={true}
                                                    onChange={this.onChange}/>

                                </div>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <div className="field-group">

                                    <p>Set the <code>multi</code> property to true,the DropdownSelect can be
                                        Multiselect.</p>

                                    <DropdownSelect data={this.data}
                                                    multi={true}
                                                    onChange={this.onChange}/>

                                </div>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <div className="field-group">

                                    <p>Set the <code>isGrouped</code> property to true,the DropdownSelect will have
                                        group.
                                    </p>

                                    <DropdownSelect style={{width: 240}}
                                                    popupStyle={{maxHeight: 300}}
                                                    data={this.groupedData}
                                                    autoClose={false}
                                                    multi={true}
                                                    isGrouped={true}
                                                    onChange={this.onChange}/>

                                </div>

                            </div>

                        </div>
                    </div>

                </Widget>

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

                <PropTypeDescTable data={DropdownSelectDoc}/>

            </div>
        );
    }
};
@@ -3420,21 +3420,25 @@
 le=%22
-With autoClos
+Self defined them
 e%22/%3E
@@ -4003,78 +4003,8 @@
 ta%7D%0A
-                                                    autoClose=%7Bfalse%7D%0A
     
@@ -4840,78 +4840,8 @@
 ta%7D%0A
-                                                    autoClose=%7Bfalse%7D%0A
     
@@ -5526,32 +5526,73 @@
              %3Cp%3E
+%0A                                        
 Set the %3Ccode%3Emu
@@ -5590,20 +5590,18 @@
  %3Ccode%3Em
-ulti
+od
 %3C/code%3E 
@@ -5608,33 +5608,30 @@
 property to 
-true,the 
+%3Ccode%3E
 DropdownSele
@@ -5636,15 +5636,30 @@
 lect
- can be
+.Mode.CHECKBOX%3C/code%3E,
 %0A   
@@ -5699,20 +5699,83 @@
     
-Multiselect.
+the DropdownSelect can be Multiselect.%0A                                    
 %3C/p%3E
@@ -5893,35 +5893,128 @@
             
-multi=%7Btrue
+autoClose=%7Bfalse%7D%0A                                                    mode=%7BDropdownSelect.Mode.CHECKBOX
 %7D%0A          

update DropdownSelect examples