/**
 * @file VerticalPointStep component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import VerticalPointStepItem from '../_VerticalPointStepItem';

class VerticalPointStep extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

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

        this.touchTapHandler = ::this.touchTapHandler;

    }

    touchTapHandler(activatedStep) {

        const {onChange} = this.props;

        this.setState({
            activatedStep
        }, () => {
            onChange && onChange({
                activatedStep,
                finishedStep: this.state.finishedStep
            });
        });

    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.activatedStep !== this.state.activatedStep
            || nextProps.finishedStep !== this.state.finishedStep) {
            this.setState({
                activatedStep: nextProps.activatedStep,
                finishedStep: nextProps.finishedStep
            });
        }
    }

    render() {

        const {className, style, steps, disabled} = this.props,
            {activatedStep, finishedStep} = this.state;

        return (
            <div className={'vertical-point-step' + (className ? ' ' + className : '')}
                 style={style}>

                {
                    steps && steps.map((item, index) => {
                        return (
                            <VerticalPointStepItem key={index}
                                                   index={index}
                                                   className={item.className}
                                                   style={item.style}
                                                   activatedStep={activatedStep}
                                                   finishedStep={finishedStep}
                                                   value={item}
                                                   isFirst={index === 0}
                                                   isLast={index === steps.length - 1}
                                                   disabled={disabled}
                                                   onTouchTap={this.touchTapHandler}/>
                        );
                    })
                }

            </div>
        );

    }
};

VerticalPointStep.propTypes = {

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,


    /**
     * The render content of step.
     */
    steps: PropTypes.arrayOf(PropTypes.shape({

        /**
         * The CSS class name of step element.
         */
        className: PropTypes.string,

        /**
         * Override the styles of the step element.
         */
        style: PropTypes.object,

        /**
         * The text value of step.
         */
        title: PropTypes.string

    })).isRequired,

    /**
     * Sets the step as active.
     */
    activatedStep: PropTypes.number,

    /**
     * The final step.
     */
    finishedStep: PropTypes.number,

    disabled: PropTypes.bool,

    /**
     * Callback function fired when step change.
     */
    onChange: PropTypes.func

};

VerticalPointStep.defaultProps = {

    className: null,
    style: null,

    steps: null,

    activatedStep: 0,
    finishedStep: 0,

    disabled: false

};

export default VerticalPointStep;
@@ -166,16 +166,53 @@
 -types';
+%0Aimport classNames from 'classnames';
 %0A%0Aimport
@@ -1364,25 +1364,25 @@
 is.state
-;
+,
 %0A%0A      
   return
@@ -1377,35 +1377,29 @@
     
-  
-return (%0A            %3Cdiv
+      stepClassName =
  cla
@@ -1404,18 +1404,18 @@
 lassName
-=%7B
+s(
 'vertica
@@ -1431,45 +1431,126 @@
 tep'
- + (className ? ' ' + className : '')
+, %7B%0A                %5BclassName%5D: className%0A            %7D);%0A%0A        return (%0A            %3Cdiv className=%7BstepClassName
 %7D%0A  
@@ -1657,48 +1657,9 @@
 ) =%3E
- %7B
 %0A
-                        return (%0A    
     
@@ -1760,20 +1760,16 @@
         
-    
 index=%7Bi
@@ -1817,28 +1817,24 @@
             
- 
-   
 className=%7Bi
@@ -1891,28 +1891,24 @@
             
-    
 style=%7Bitem.
@@ -1953,36 +1953,32 @@
                 
- 
-   
 activatedStep=%7Ba
@@ -2030,36 +2030,32 @@
                 
-    
 finishedStep=%7Bfi
@@ -2113,20 +2113,16 @@
         
- 
-   
 value=%7Bi
@@ -2126,20 +2126,16 @@
 =%7Bitem%7D%0A
-    
         
@@ -2195,20 +2195,16 @@
  === 0%7D%0A
-    
         
@@ -2325,20 +2325,16 @@
         
-    
 disabled
@@ -2392,20 +2392,16 @@
         
- 
-   
 onTouchT
@@ -2452,36 +2452,8 @@
     
-    );%0A                    %7D
 )%0A  

update VerticalPointStep