import React, {Component} from 'react';

import DotStep from 'src/DotStep';
import RaisedButton from 'src/RaisedButton';
import Widget from 'src/Widget';
import WidgetHeader from 'src/WidgetHeader';

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

import 'sass/containers/app/modules/stepper/DotStepExamples.scss';

export default class DotStepExamples extends Component {

    constructor(props) {

        super(props);

        this.state = {
            activatedStep: 0,
            finishedStep: 0
        };

        this.updateStep = ::this.updateStep;
        this.prev = ::this.prev;
        this.next = ::this.next;
        this.reset = ::this.reset;
        this.setFinished = ::this.setFinished;

    }

    updateStep(step) {
        this.setState({
            ...step
        });
    }

    prev() {
        this.setState({
            activatedStep: this.state.activatedStep - 1
        });
    }

    next() {

        const activatedStep = this.state.activatedStep + 1,
            finishedStep = this.state.finishedStep > activatedStep ? this.state.finishedStep : activatedStep;

        this.setState({
            activatedStep,
            finishedStep
        });

    }

    reset() {
        this.setState({
            activatedStep: 0,
            finishedStep: 0
        });
    }

    setFinished(text) {
        return text;
    }

    render() {

        const {activatedStep, finishedStep} = this.state,
            steps = [{
                value: 'Step1',
                rightIconCls: 'far fa-circle'
            }, {
                value: 'Step2',
                rightIconCls: 'far fa-circle'
            }, {
                value: 'Step3',
                rightIconCls: 'far fa-circle'
            }, {
                value: 'Step4',
                rightIconCls: 'far fa-circle'
            }, {
                value: 'Step5',
                rightIconCls: 'far fa-circle'
            }, {
                value: 'Step6',
                rightIconCls: 'far fa-circle'
            }];

        steps.map((item, index) => {
            if (finishedStep >= index) {
                item.rightIconCls = 'fas fa-check-circle';
            }
            return item;
        });

        return (
            <div className="example dot-step-examples">

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

                <p>
                    A <span>DotStep</span> is an interface for users to show dot steps or for navigation. It just
                    provides views, not handling logic (when the step is active, or when the step is completed, or
                    how to move to the next step).
                </p>

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

                <Widget>

                    <WidgetHeader className="example-header"
                                  title="DotStep Example"/>

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

                            <p>A simple <code>DotStep</code> example.</p>

                            <DotStep steps={steps}
                                     displayField={'value'}
                                     activatedStep={activatedStep}
                                     finishedStep={finishedStep}
                                     finishedText={this.setFinished('finished')}
                                     onChange={this.updateStep}/>

                            <div className="step-ctrls">

                                <RaisedButton value="Prev"
                                              iconCls="fas fa-angle-left"
                                              disabled={activatedStep <= 0}
                                              onClick={this.prev}/>

                                <RaisedButton value={activatedStep < steps.length - 1 ? 'Next' : 'Finish'}
                                              rightIconCls={activatedStep < steps.length - 1 ? 'fas fa-angle-right' : ''}
                                              disabled={activatedStep >= steps.length}
                                              onClick={this.next}/>

                                <RaisedButton value="Reset"
                                              iconCls="fas fa-undo"
                                              onClick={this.reset}/>

                            </div>

                        </div>
                    </div>

                </Widget>

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

                <PropTypeDescTable data={doc}/>

            </div>
        );
    }
};
@@ -377,23 +377,8 @@
 ';%0A%0A
-export default 
 clas
@@ -562,25 +562,23 @@
 %7D;%0A%0A    
+%7D%0A%0A
     
-this.
 updateSt
@@ -586,203 +586,15 @@
 p = 
-::this.updateStep;%0A        this.prev = ::this.prev;%0A        this.next = ::this.next;%0A        this.reset = ::this.reset;%0A        this.setFinished = ::this.setFinished;%0A%0A    %7D%0A%0A    updateStep(step)
+step =%3E
  %7B%0A 
@@ -649,24 +649,25 @@
    %7D);%0A    %7D
+;
 %0A%0A    prev()
@@ -664,18 +664,24 @@
     prev
-()
+ = () =%3E
  %7B%0A     
@@ -768,24 +768,25 @@
    %7D);%0A    %7D
+;
 %0A%0A    next()
@@ -783,18 +783,24 @@
     next
-()
+ = () =%3E
  %7B%0A%0A    
@@ -1056,24 +1056,25 @@
   %7D);%0A%0A    %7D
+;
 %0A%0A    reset(
@@ -1072,18 +1072,24 @@
    reset
-()
+ = () =%3E
  %7B%0A     
@@ -1178,24 +1178,25 @@
    %7D);%0A    %7D
+;
 %0A%0A    setFin
@@ -1204,14 +1204,18 @@
 shed
-(
+ = 
 text
-)
+ =%3E
  %7B%0A 
@@ -1235,24 +1235,25 @@
  text;%0A    %7D
+;
 %0A%0A    render
@@ -4532,8 +4532,41 @@
     %7D%0A%7D;
+%0A%0Aexport default DotStepExamples;

update DotStepExamples