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

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

class RoundStepItem 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={'round-step-item' + itemClassName}
                 style={style}>

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

                {
                    !isFirst && (finishedStep >= index || activatedStep >= index) ?
                        <div className="left-bar"></div>
                        :
                        null
                }

                {
                    !isLast ?
                        <div className={'right-bar' + this.getRightBarClassName()}></div>
                        :
                        null
                }

                <div className="round"
                     onTouchTap={this.touchTapHandler}>
                    {
                        showFinishedStepIcon && finishedStep > index ?
                            <i className={finishedStepIconCls}
                               aria-hidden="true"></i>
                            :
                            (index + 1)
                    }
                </div>

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

            </div>
        );

    }
};

RoundStepItem.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

};

RoundStepItem.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 RoundStepItem;
@@ -162,16 +162,53 @@
 -types';
+%0Aimport classNames from 'classnames';
 %0A%0Aclass 
@@ -1285,59 +1285,37 @@
 e = 
-(isFirst ? ' first' : '') + (isLast ? ' last' : '')
+classNames('round-step-item',
 %0A   
@@ -1327,19 +1327,16 @@
         
-+ (
 activate
@@ -1409,17 +1409,19 @@
 d' : '')
-)
+, %7B
 %0A       
@@ -1433,19 +1433,90 @@
     
-+ (
+    first: isFirst,%0A                    last: isLast,%0A                    
 disabled
  ? '
@@ -1511,20 +1511,17 @@
 disabled
- ? '
+:
  disable
@@ -1525,19 +1525,31 @@
 bled
-' : '') + (
+,%0A                    %5B
 clas
@@ -1557,16 +1557,10 @@
 Name
- ? ' ' +
+%5D:
  cla
@@ -1565,21 +1565,34 @@
 lassName
- : ''
+%0A                %7D
 );%0A%0A    
@@ -1636,28 +1636,8 @@
 me=%7B
-'round-step-item' + 
 item

update RoundStepItem