import React, {Component} from 'react';
import {DragDropContext} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

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

import PropTypeDescTable from '../PropTypeDescTable';
import DraggableListDoc from 'assets/propTypes/DraggableList.json';

import 'sass/containers/app/modules/draggable/DraggableListExamples.scss';

@DragDropContext(HTML5Backend)
export default class DraggableListExamples extends Component {

    constructor(props) {

        super(props);

        this.listData = [{
            iconCls: 'fa fa-facebook',
            text: 'Facebook'
        }, {
            iconCls: 'fa fa-twitter',
            text: 'Twitter'
        }, {
            iconCls: 'fa fa-google-plus',
            text: 'Google+'
        }];

        this.largeListData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

        this.sequenceChangeHandler = this::this.sequenceChangeHandler;
        this.valueChangeHandler = this::this.valueChangeHandler;

    }

    sequenceChangeHandler(value) {
        console.log('Sequence Changed:', value);
    }

    valueChangeHandler(value) {
        console.log('Value Changed:', value);
    }

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

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

                <p>
                    <span>DraggableList</span> is a list of elements that allow you to move elements with the mouse.
                </p>

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

                <Widget>

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

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

                            <div className="examples-wrapper">

                                <p>
                                    A multiple-choice <code>DraggableList</code> example.
                                </p>

                                <div style={{width: 240}}>
                                    <DraggableList style={{width: 240}}
                                                   selectMode={DraggableList.SelectMode.MULTI_SELECT}
                                                   items={this.listData}
                                                   onSequenceChange={this.sequenceChangeHandler}
                                                   onValueChange={this.valueChangeHandler}/>
                                </div>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

                    <WidgetHeader className="example-header" title="Draggable Group"/>

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

                            <div className="examples-wrapper">

                                <p>
                                    A radio <code>DraggableList</code> example.
                                </p>

                                <div style={{width: 240, height: 240}}>
                                    <DraggableList style={{width: 240, height: 240}}
                                                   items={this.largeListData}
                                                   onSequenceChange={this.sequenceChangeHandler}
                                                   onValueChange={this.valueChangeHandler}/>
                                </div>

                            </div>

                        </div>
                    </div>

                </Widget>

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

                <PropTypeDescTable data={DraggableListDoc}/>

            </div>
        );
    }
};
@@ -2380,37 +2380,36 @@
                 
-items
+data
 =%7Bthis.listData%7D
@@ -2551,37 +2551,32 @@
               on
-Value
 Change=%7Bthis.val
@@ -3412,13 +3412,12 @@
     
-items
+data
 =%7Bth
@@ -3584,21 +3584,16 @@
       on
-Value
 Change=%7B

update DraggableList examples