import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React, { Component } from 'react';
import './index.less';
import classNames from 'classnames';

var CardSteps = function (_Component) {
    _inherits(CardSteps, _Component);

    function CardSteps(props) {
        _classCallCheck(this, CardSteps);

        var _this = _possibleConstructorReturn(this, (CardSteps.__proto__ || Object.getPrototypeOf(CardSteps)).call(this, props));

        _this.onStepClick = function (data, index) {
            var _this$props = _this.props,
                clickable = _this$props.clickable,
                onClick = _this$props.onClick;

            clickable && onClick(data, index);
        };
        _this.getStepNode = function (data, index) {
            var _this$props2 = _this.props,
                current = _this$props2.current,
                clickable = _this$props2.clickable;

            return React.createElement(
                'div',
                { key: data.name, className: classNames({ csNodeOut: true, beforeCurrent: index <= current }), style: { width: _this.nodeWidth }, onClick: function onClick() {
                        _this.onStepClick(data, index);
                    } },
                React.createElement(
                    'div',
                    { className: 'csNodeIn', style: { cursor: clickable ? 'pointer' : '' } },
                    React.createElement(
                        'span',
                        { className: 'csIndex' },
                        index + 1
                    ),
                    React.createElement(
                        'span',
                        { className: 'csName' },
                        data.name
                    )
                ),
                React.createElement('div', { className: 'csTriangle' }),
                React.createElement(
                    'div',
                    { className: 'csTriangleBack' },
                    React.createElement('div', { className: 'csWhiteTriagle' })
                )
            );
        };
        _this.sourceLength = _this.props.dataSource.length;
        _this.nodeWidth = _this.sourceLength > 0 ? 100 / _this.sourceLength + '%' : '100%';
        return _this;
    }

    _createClass(CardSteps, [{
        key: 'render',
        value: function render() {
            var dataSource = this.props.dataSource;

            return React.createElement(
                'div',
                { className: 'csWraper' },
                dataSource.length > 0 && dataSource.map(function (data, index) {
                    return this.getStepNode(data, index);
                }.bind(this))
            );
        }
    }]);

    return CardSteps;
}(Component);

CardSteps.defaultProps = {
    current: 0,
    dataSource: [],
    clickable: false
};
export default CardSteps;