import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{height:100}}/>
        <View style={styles.trackingContainer}>
          <TrackingItem stageName="Payment" left={false}/>
          <TrackingItem stageName="Shipping" style={{flexBasis: 50, flexGrow: 1}}/>
          <TrackingItem stageName="Confirmation" right={false}/>
        </View>
      </View>
    );
  }
}

const Line = function({style, left = true, right = true}) {
  return <View style={[style, {height : StyleSheet.hairlineWidth, backgroundColor: 'black', position : 'absolute', top: '50%', left: left?0 : '50%', right: right?0:'50%'}]}></View>
}
class TrackingItem extends React.Component {
  render() {
    const { left = true, right = true } = this.props;
    return (
      <View style={[this.props.style, { alignItems: "center" }]}>
        <Image
          resizeMode="contain"
          source={this.props.logoImage || require("./images/location-blue.png")}
          style={{ width: 15, height: 14 }}
        />
        <View style={{alignItems:'center', width: "100%"}}>
          <Line left={left} right={right}/>
        <Image
          resizeMode="contain"
          source={this.props.stageImage || require("./images/circle.png")}
          style={{
            backgroundColor: "#F5F5F5",
            width: 12,
            height: 12,
            marginVertical: 10
          }}
        />
        </View>
        <View style={{ alignItems: "center" }}>
          <Text
            style={[
              styles.fontSmall,
              styles.fontRegular
            ]}
          >
            {this.props.stageName}
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  trackingContainer : {
    paddingHorizontal: 20,
    width : "100%",
    justifyContent : "space-between",
    flexDirection : "row"
  }
});