'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.VerticalStepper = exports.StatelessVerticalStepper = undefined;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _utils = require('../utils');

var _withStepper = require('../with-stepper');

var _stepHeader = require('./step-header');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var enhance = _withStepper.withStepper;
var StatelessVerticalStepper = exports.StatelessVerticalStepper = function StatelessVerticalStepper(_ref) {
    var pages = _ref.pages,
        currentPage = _ref.currentPage,
        setPageIndex = _ref.setPageIndex,
        activeColor = _ref.activeColor,
        alertColor = _ref.alertColor;
    return React.createElement("div", { style: { position: 'relative', marginTop: 24 } }, React.createElement(_utils.VerticalLine, null), React.createElement("div", { style: { paddingLeft: 60 } }, pages.map(function (page, i) {
        return React.createElement("div", { key: i, style: currentPage === i - 1 ? { paddingTop: 32 } : {} }, React.createElement(_stepHeader.StepHeader, { step: i + 1, active: currentPage === i, page: page, onClick: function onClick() {
                return setPageIndex(i);
            }, style: { position: 'relative', right: 44 }, activeColor: activeColor, alertColor: alertColor }), currentPage === i && (page.render ? page.render() : React.createElement(page.component, null)));
    })));
};
/**
 * A component that renders the mobile version of the vertical stepper
 * from the [material design guidlines](https://material.io/guidelines/components/steppers.html#steppers-types-of-steppers)
 */
var VerticalStepper = exports.VerticalStepper = enhance(StatelessVerticalStepper);
//# sourceMappingURL=vertical-stepper.js.map
