import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { Step } from './Step';
const styles = StyleSheet.create({
    container: {
        alignSelf: 'stretch',
        flexDirection: 'row'
    },
    stepContainer: {
        flex: 1
    }
});
export class StepIndicator extends Component {
    constructor() {
        super(...arguments);
        this.renderStep = (title, index) => {
            const completed = index < this.props.currentStep;
            let stepStyle = this.props.defaultStyle;
            let textStyle = this.props.defaultTextStyle;
            if (index === this.props.currentStep) {
                stepStyle = this.props.currentStyle;
                textStyle = this.props.currentTextStyle;
            }
            else if (completed) {
                stepStyle = this.props.completedStyle;
                textStyle = this.props.completedTextStyle;
            }
            return (<Step completed={completed} completedIcon={this.props.completedIcon} completedIconStyle={this.props.completedIconStyle} key={`step-indicator-step-${index}`} onPress={this.stepPressed(index, title)} stepNumber={index + 1} style={stepStyle} title={title} titleStyle={textStyle}/>);
        };
        this.stepPressed = (index, title) => {
            return () => {
                if (this.props.onStepPressed) {
                    this.props.onStepPressed(index, title);
                }
            };
        };
    }
    render() {
        return (<View style={[styles.container, this.props.style]}>
        {this.props.stepTitles.map(this.renderStep)}
      </View>);
    }
}
//# sourceMappingURL=StepIndicator.js.map