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

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

import PointStepItem from '../_PointStepItem';

class PointStep extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

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

    }

    clickHandler = 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, showFinishedStepIcon, finishedStepIconCls, disabled} = this.props,
            {activatedStep, finishedStep} = this.state,

            stepClassName = classNames('point-step', {
                [className]: className
            });

        return (
            <div className={stepClassName}
                 style={style}>

                {
                    steps && steps.map((item, index) =>
                        <PointStepItem key={index}
                                       index={index}
                                       className={item.className}
                                       style={{
                                           ...item.style,
                                           width: `${100 / steps.length}%`,
                                           zIndex: steps.length - index
                                       }}
                                       activatedStep={activatedStep}
                                       finishedStep={finishedStep}
                                       value={item}
                                       isFirst={index === 0}
                                       isLast={index === steps.length - 1}
                                       showFinishedStepIcon={showFinishedStepIcon}
                                       finishedStepIconCls={finishedStepIconCls}
                                       disabled={disabled}
                                       onClick={this.clickHandler}/>
                    )
                }

            </div>
        );

    }
}

PointStep.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,

    showFinishedStepIcon: PropTypes.bool,
    finishedStepIconCls: PropTypes.string,

    disabled: PropTypes.bool,

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

};

PointStep.defaultProps = {

    activatedStep: 0,
    finishedStep: 0,

    showFinishedStepIcon: true,
    finishedStepIconCls: 'fas fa-check',
    disabled: false

};

export default PointStep;
@@ -496,28 +496,27 @@
  %7D%0A%0A    
-clickHandler
+handleClick
  = activ
@@ -1320,21 +1320,36 @@
 is.state
-,
+;
 %0A%0A  
+      return (%0A
         
@@ -1350,29 +1350,32 @@
         
-stepC
+  %3Cdiv c
 lassName
  = class
@@ -1366,19 +1366,18 @@
 lassName
- = 
+=%7B
 classNam
@@ -1452,69 +1452,8 @@
   %7D)
-;%0A%0A        return (%0A            %3Cdiv className=%7BstepClassName
 %7D%0A  
@@ -1482,17 +1482,16 @@
 style%7D%3E%0A
-%0A
         
@@ -2626,20 +2626,19 @@
 his.
-clickHandler
+handleClick
 %7D/%3E%0A
@@ -2673,25 +2673,24 @@
           %7D%0A
-%0A
             
@@ -3938,8 +3938,9 @@
 intStep;
+%0A

update PointStep