import React, {Component} from 'react';

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

import PropTypeDescTable from '../PropTypeDescTable';
import GridDoc from 'assets/propTypes/Grid.json';

import 'sass/containers/app/modules/layout/GridExamples.scss';

export default class GridExamples extends Component {

    constructor(props) {

        super(props);

        this.descListData = [{
            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.'
        }];

        this.groupedListData = [{
            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.changeHandle = this::this.changeHandle;

    }

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

    render() {
        return (
            <div className="example grid-examples">

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

                <p>
                    <span>Grid</span> system.
                </p>

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

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <p>
                                    A <code>Grid</code> with desc.
                                </p>

                                <Grid items={this.descListData}/>

                            </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>
                                    A <code>Grid</code> with select mode.Can be normal,radio,checkbox.
                                </p>

                                <Grid selectMode={Grid.SelectMode.SINGLE_SELECT}
                                      items={this.descListData}
                                      onChange={this.changeHandle}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <p>
                                    A <code>Grid</code> with isGrouped.
                                </p>

                                <Grid selectMode={Grid.SelectMode.MULTI_SELECT}
                                      isGrouped={true}
                                      items={this.groupedListData}
                                      onChange={this.changeHandle}/>

                            </div>

                        </div>
                    </div>

                </Widget>

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

                <PropTypeDescTable data={GridDoc}/>

            </div>
        );
    }
};
@@ -1860,16 +1860,17 @@
 geHandle
+r
  = this:
@@ -1887,16 +1887,17 @@
 geHandle
+r
 ;%0A%0A    %7D
@@ -1914,16 +1914,17 @@
 geHandle
+r
 (value) 
@@ -2963,14 +2963,16 @@
 le=%22
-With m
+Select M
 ode%22
@@ -3267,34 +3267,8 @@
 .Can
- be normal,radio,checkbox.
 %0A   
@@ -3300,746 +3300,68 @@
     
-%3C/p%3E%0A%0A                                %3CGrid selectMode=%7BGrid.SelectMode.SINGLE_SELECT%7D%0A                                      items=%7Bthis.descListData%7D%0A                                      onChange=%7Bthis.changeHandle%7D/%3E%0A%0A                            %3C/div%3E%0A%0A                        %3C/div%3E%0A                    %3C/div%3E%0A%0A                %3C/Widget%3E%0A%0A                %3CWidget%3E%0A%0A                    %3CWidgetHeader className=%22example-header%22 title=%22With isGrouped%22/%3E%0A%0A                    %3Cdiv className=%22widget-content%22%3E%0A                        %3Cdiv className=%22example-content%22%3E%0A%0A                            %3Cdiv className=%22examples-wrapper%22%3E%0A%0A                                %3Cp%3E%0A                                    A %3Ccode%3EGrid%3C/code%3E with isGrouped
+    be %3Ccode%3ESINGLE_SELECT%3C/code%3E, %3Ccode%3EMULTI_SELECT%3C/code%3E
 .%0A  
@@ -3480,63 +3480,8 @@
 CT%7D%0A
-                                      isGrouped=%7Btrue%7D%0A
     
@@ -3522,31 +3522,28 @@
 items=%7Bthis.
-grouped
+desc
 ListData%7D%0A  
@@ -3605,16 +3605,17 @@
 geHandle
+r
 %7D/%3E%0A%0A   

update Grid examples