import React, {Component} from 'react';

import RaisedButton from 'src/RaisedButton';
import Notifier from 'src/Notifier';
import Widget from 'src/Widget';
import WidgetHeader from 'src/WidgetHeader';
import MaterialProvider from 'src/MaterialProvider';
import ButtonRadioGroup from 'src/ButtonRadioGroup';
import MaterialTextField from 'src/MaterialTextField';

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

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

export default class NotificationExamples extends Component {

    constructor(props) {

        super(props);

        this.state = {
            type: Notifier.Type.INFO,
            position: Notifier.Position.BOTTOM_RIGHT,
            title: 'Title',
            message: 'Message',
            notifications: []
        };

        this.Type = Object.keys(Notifier.Type).map(item => ({
            className: `type-${item.toLowerCase()}`,
            iconCls: 'fas fa-check',
            label: item,
            value: Notifier.Type[item]
        }));

        this.notificationPosition = Object.keys(Notifier.Position).map(item => ({
            label: item,
            value: Notifier.Position[item]
        }));

        this.updateField = ::this.updateField;
        this.addNotification = ::this.addNotification;
        this.notificationPopHandler = ::this.notificationPopHandler;

    }

    updateField(key, value) {
        let state = {};
        state[key] = value;
        this.setState(state);
    }

    addNotification(position) {

        const {type, title, message, notifications} = this.state;

        notifications.push({
            type,
            title,
            message
        });

        this.setState({
            notifications,
            position
        });

    }

    notificationPopHandler() {
        this.setState({
            notifications: []
        });
    }

    render() {

        const {type, position, title, message, notifications} = this.state;

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

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

                <p>
                    <span>Notification</span> is a global display notification alert information .
                </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">

                                <ButtonRadioGroup data={this.Type}
                                                  value={type}
                                                  onChange={value => {
                                                      this.updateField('type', value);
                                                  }}/>

                                <MaterialTextField theme={MaterialTextField.Theme.HIGHLIGHT}
                                                   value={title}
                                                   onChange={value => {
                                                       this.updateField('title', value);
                                                   }}/>

                                <MaterialTextField theme={MaterialTextField.Theme.HIGHLIGHT}
                                                   value={message}
                                                   onChange={value => {
                                                       this.updateField('message', value);
                                                   }}/>

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

                                    <div className="button-group top">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Top Left"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.TOP_LEFT);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Top"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.TOP);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Top right"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.TOP_RIGHT);
                                                      }}/>
                                    </div>

                                    <div className="button-group right">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Right Top"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.RIGHT_TOP);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Right"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.RIGHT);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Right Bottom"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.RIGHT_BOTTOM);
                                                      }}/>
                                    </div>

                                    <div className="button-group bottom">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Bottom Left"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.BOTTOM_LEFT);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Bottom"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.BOTTOM);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Bottom Right"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.BOTTOM_RIGHT);
                                                      }}/>
                                    </div>

                                    <div className="button-group left">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Left Top"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.LEFT_TOP);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Left"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.LEFT);
                                                      }}/>
                                        <RaisedButton className="trigger-position-button"
                                                      value="Left Bottom"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.LEFT_BOTTOM);
                                                      }}/>
                                    </div>

                                    <div className="button-group center">
                                        <RaisedButton className="trigger-position-button"
                                                      value="Center"
                                                      onClick={() => {
                                                          this.addNotification(Notifier.Position.CENTER);
                                                      }}/>
                                    </div>

                                </div>

                                <Notifier notifications={notifications}
                                          position={position}
                                          onNotificationPop={this.notificationPopHandler}/>

                            </div>

                        </div>
                    </div>

                </Widget>

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

                <PropTypeDescTable data={doc}/>

            </div>
        );
    }
};
@@ -198,61 +198,8 @@
 r';%0A
-import MaterialProvider from 'src/MaterialProvider';%0A
 impo
@@ -552,23 +552,8 @@
 ';%0A%0A
-export default 
 clas
@@ -1260,180 +1260,8 @@
 );%0A%0A
-        this.updateField = ::this.updateField;%0A        this.addNotification = ::this.addNotification;%0A        this.notificationPopHandler = ::this.notificationPopHandler;%0A%0A
     
@@ -1278,16 +1278,19 @@
 ateField
+ = 
 (key, va
@@ -1293,16 +1293,19 @@
 , value)
+ =%3E
  %7B%0A     
@@ -1382,24 +1382,25 @@
 tate);%0A    %7D
+;
 %0A%0A    addNot
@@ -1412,17 +1412,19 @@
 tion
-(
+ = 
 position
 ) %7B%0A
@@ -1419,17 +1419,19 @@
 position
-)
+ =%3E
  %7B%0A%0A    
@@ -1678,24 +1678,25 @@
   %7D);%0A%0A    %7D
+;
 %0A%0A    notifi
@@ -1711,18 +1711,24 @@
 pHandler
-()
+ = () =%3E
  %7B%0A     
@@ -1789,24 +1789,25 @@
    %7D);%0A    %7D
+;
 %0A%0A    render
@@ -10009,8 +10009,46 @@
     %7D%0A%7D;
+%0A%0Aexport default NotificationExamples;

update NotificationExamples