import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';

import RaisedButton from 'src/RaisedButton';
import Drawer from 'src/Drawer';
import List from 'src/List';
import Widget from 'src/Widget';
import WidgetHeader from 'src/WidgetHeader';

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

import 'sass/containers/app/modules/pop/PopExamples.scss';
import 'sass/containers/app/modules/pop/DrawerExamples.scss';

export default class DrawerExamples extends Component {

    constructor(props) {

        super(props);

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

        this.state = {
            popupVisible: {}
        };

        this.toggleDrawer = ::this.toggleDrawer;
        this.openDrawer = ::this.openDrawer;
        this.closeDrawer = ::this.closeDrawer;

    }

    toggleDrawer(id) {

        const {popupVisible} = this.state;

        popupVisible[id] = !popupVisible[id];

        this.setState({
            popupVisible
        });

    }

    openDrawer(id) {

        const {popupVisible} = this.state;

        popupVisible[id] = true;

        this.setState({
            popupVisible
        });

    }

    closeDrawer(id) {

        const {popupVisible} = this.state;

        popupVisible[id] = false;

        this.setState({
            popupVisible
        });

    }

    render() {

        const {popupVisible} = this.state;

        return (
            <div className="example pop-examples drawer-examples">

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

                <p>
                    A <span>Drawer</span> can be used as an alternative to a Drop Down that can contain elements inside.
                </p>

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

                <Widget>

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

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

                            <div className="popup-example-wrapper">

                                <p>
                                    Set the <code>value</code> property to show different position
                                    of <code>Drawer</code>.
                                </p>

                                <div className="button-group-wrapper">

                                    <div className="button-group top">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Top"
                                                      onClick={() => {
                                                          this.toggleDrawer(0);
                                                      }}/>
                                    </div>

                                    <div className="button-group right">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Right"
                                                      onClick={() => {
                                                          this.toggleDrawer(1);
                                                      }}/>
                                    </div>

                                    <div className="button-group bottom">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Bottom"
                                                      onClick={() => {
                                                          this.toggleDrawer(2);
                                                      }}/>
                                    </div>

                                    <div className="button-group left">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Left"
                                                      onClick={() => {
                                                          this.toggleDrawer(3);
                                                      }}/>
                                    </div>

                                </div>


                                <Drawer visible={popupVisible[0]}
                                        position={Drawer.Position.TOP}
                                        onRequestClose={() => {
                                            this.closeDrawer(0);
                                        }}>
                                    <List data={this.data}/>
                                </Drawer>
                                <Drawer visible={popupVisible[1]}
                                        position={Drawer.Position.RIGHT}
                                        onRequestClose={() => {
                                            this.closeDrawer(1);
                                        }}>
                                    <List data={this.data}/>
                                </Drawer>
                                <Drawer visible={popupVisible[2]}
                                        position={Drawer.Position.BOTTOM}
                                        onRequestClose={() => {
                                            this.closeDrawer(2);
                                        }}>
                                    <List data={this.data}/>
                                </Drawer>
                                <Drawer visible={popupVisible[3]}
                                        position={Drawer.Position.LEFT}
                                        onRequestClose={() => {
                                            this.closeDrawer(3);
                                        }}>
                                    <List data={this.data}/>
                                </Drawer>

                            </div>

                        </div>
                    </div>
                </Widget>

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

                <PropTypeDescTable data={doc}/>

            </div>
        );
    }
};
@@ -36,47 +36,8 @@
 ct';
-%0Aimport %7BfindDOMNode%7D from 'react-dom';
 %0A%0Aim
@@ -457,23 +457,8 @@
 ';%0A%0A
-export default 
 clas
@@ -970,33 +970,31 @@
     %7D;%0A%0A    
+%7D%0A%0A
     
-this.
 toggleDrawer
@@ -1000,149 +1000,13 @@
 r = 
-::this.toggleDrawer;%0A        this.openDrawer = ::this.openDrawer;%0A        this.closeDrawer = ::this.closeDrawer;%0A%0A    %7D%0A%0A    toggleDrawer(id)
+id =%3E
  %7B%0A%0A
@@ -1159,24 +1159,25 @@
   %7D);%0A%0A    %7D
+;
 %0A%0A    openDr
@@ -1176,28 +1176,32 @@
   openDrawer
-(id)
+ = id =%3E
  %7B%0A%0A        
@@ -1333,24 +1333,25 @@
   %7D);%0A%0A    %7D
+;
 %0A%0A    closeD
@@ -1359,12 +1359,16 @@
 awer
-(id)
+ = id =%3E
  %7B%0A%0A
@@ -1509,24 +1509,25 @@
   %7D);%0A%0A    %7D
+;
 %0A%0A    render
@@ -6480,8 +6480,40 @@
     %7D%0A%7D;
+%0A%0Aexport default DrawerExamples;

update DrawerExamples