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

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

class PointStepItem extends Component {

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.getRightBarClassName = ::this.getRightBarClassName;
        this.touchTapHandler = ::this.touchTapHandler;

    }

    getRightBarClassName() {

        const {activatedStep, finishedStep, index} = this.props;

        if (finishedStep > index || activatedStep > index) {
            return ' full';
        }

        if (activatedStep === index || finishedStep === index) {
            return '';
        }

        return ' hidden';

    }

    touchTapHandler(e) {
        e.preventDefault();
        const {activatedStep, finishedStep, index, disabled, onTouchTap} = this.props;
        !disabled && activatedStep !== index && finishedStep >= index && onTouchTap && onTouchTap(index, e);
    }

    render() {

        const {
                className, style, activatedStep, finishedStep, index, value, isFirst, isLast,
                showFinishedStepIcon, finishedStepIconCls, disabled
            } = this.props,

            itemClassName = (isFirst ? ' first' : '') + (isLast ? ' last' : '')
                + (activatedStep == index ? ' activated' : (finishedStep >= index ? ' finished' : ''))
                + (disabled ? ' disabled' : '') + (className ? ' ' + className : '');

        return (
            <div className={'point-step-item' + itemClassName}
                 style={style}>

                <div className="bg-bar"></div>
                <div className="bg-round"></div>

                <div className="round"
                     onTouchTap={this.touchTapHandler}></div>

                <div className="title">
                    {value.title}
                </div>

            </div>
        );

    }
};

PointStepItem.propTypes = {

    className: PropTypes.string,
    style: PropTypes.object,

    activatedStep: PropTypes.number,
    finishedStep: PropTypes.number,
    index: PropTypes.number,
    value: PropTypes.object,
    isFirst: PropTypes.bool,
    isLast: PropTypes.bool,

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

    disabled: PropTypes.bool,

    onTouchTap: PropTypes.func

};

PointStepItem.defaultProps = {

    className: '',
    style: null,

    activatedStep: 0,
    finishedStep: 0,
    index: 0,
    value: {},
    isFirst: true,
    isLast: false,

    showFinishedStepIcon: true,
    finishedStepIconCls: 'fa fa-check',

    disabled: false

};

export default PointStepItem;
@@ -162,16 +162,53 @@
 -types';
+%0Aimport classNames from 'classnames';
 %0A%0Aclass 
@@ -1061,33 +1061,16 @@
  const %7B
-%0A                
 classNam
@@ -1142,185 +1142,91 @@
 ast,
-%0A                showFinishedStepIcon, finishedStepIconCls, disabled%0A            %7D = this.props,%0A%0A            itemClassName = (isFirst ? ' first' : '') + (isLast ? ' last' : '')
+ disabled%7D = this.props,%0A%0A            itemClassName = classNames('point-step-item',
 %0A   
@@ -1238,19 +1238,16 @@
         
-+ (
 activate
@@ -1324,37 +1324,110 @@
  '')
-)%0A                + (
+, %7B%0A                    first: isFirst,%0A                    last: isLast,%0A                    
 disabled
  ? '
@@ -1422,20 +1422,17 @@
 disabled
- ? '
+:
  disable
@@ -1436,19 +1436,31 @@
 bled
-' : '') + (
+,%0A                    %5B
 clas
@@ -1468,16 +1468,10 @@
 Name
- ? ' ' +
+%5D:
  cla
@@ -1476,21 +1476,34 @@
 lassName
- : ''
+%0A                %7D
 );%0A%0A    
@@ -2233,95 +2233,8 @@
 ol,%0A
-%0A    showFinishedStepIcon: PropTypes.bool,%0A    finishedStepIconCls: PropTypes.string,%0A%0A
     
@@ -2479,82 +2479,8 @@
 se,%0A
-%0A    showFinishedStepIcon: true,%0A    finishedStepIconCls: 'fa fa-check',%0A%0A
     

update PointStepItem