import React, { Component } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
const styles = StyleSheet.create({
    completedIcon: {
        height: 32,
        flex: 0,
        width: 32
    },
    container: {
        alignItems: 'center',
        borderColor: 'black',
        borderWidth: 1,
        flexDirection: 'row',
        flex: 1,
        padding: 5
    },
    titleText: {
        flexGrow: 1
    }
});
export class Step extends Component {
    constructor() {
        super(...arguments);
        this.renderDoneIcon = () => {
            if (!this.props.completed || !this.props.completedIcon) {
                return null;
            }
            return (<Image style={[styles.completedIcon, this.props.completedIconStyle]} source={this.props.completedIcon}/>);
        };
        this.renderTitle = () => {
            return (<Text style={[styles.titleText, this.props.titleStyle]}>
        {this.props.title}
      </Text>);
        };
    }
    render() {
        if (this.props.completed) {
            return (<TouchableOpacity onPress={this.props.onPress} style={[styles.container, this.props.style]}>
          {this.renderTitle()}
          {this.renderDoneIcon()}
        </TouchableOpacity>);
        }
        else {
            return (<View style={[styles.container, this.props.style]}>
          {this.renderTitle()}
          {this.renderDoneIcon()}
        </View>);
        }
    }
}
//# sourceMappingURL=Step.js.map