import React,{Component} from 'react'
import { Text, View } from 'react-native'
import Icon from 'src/components/Icon'

class StepNumber extends Component {
  render() {
    if(this.props.isFinished) {
      return(
        <View style={styles.step_number_finished}>
          <Text style={{color:'#00420A'}}>{this.props.number}</Text>
        </View>
      )
    } else if(this.props.isCurrent) {
      return(
        <View style={styles.step_number_current}>
          <Text style={[{color:'#00420A'}]}>{this.props.number}</Text>
        </View>
      )
    } else {
      return(
        <View style={styles.step_number_unfinished}>
          <Text style={styles.step_number_text}>{this.props.number}</Text>
        </View>
      )
    }

  }
}

class LineStep extends Component {
  render() {
      if(this.props.isFinished){
        return(
          <View style={styles.line_step_finished}>

          </View>
        )
      }else if(this.props.isCurrent){
        return(
          <View style={styles.line_step_current}>

          </View>
        )
      } else {
        return(
          <View style={styles.line_step_unfinished}>

          </View>
        )
      }
  }
}

export class CustomStepIndicator extends Component {

  render() {
    let items = [];
    let currentStep = this.props.currentStep || 1;
    for (let i = 1; i< this.props.totalStep+1; i++){
      if(i == this.props.totalStep){
        items.push(
            <StepNumber
              key={`step_${i}`}
              number={i}
              isFinished={currentStep > i ? true:false}
              isCurrent={currentStep == i ? true:false}
              isUnFinished={currentStep < i ? true:false}
            >
            </StepNumber>
        )
      }else{
        items.push(
            <StepNumber
              key={`step_${i}`}
              number={i}
              isFinished={currentStep > i ? true:false}
              isCurrent={currentStep == i ? true:false}
              isUnFinished={currentStep < i ? true:false}
            >
            </StepNumber>
        )
        items.push(
          <LineStep
            key={`line_${i}`}
            isFinished={currentStep-1 > i ? true:false}
            isCurrent={currentStep-1 == i ? true:false}
            isUnFinished={currentStep > i ? true:false}
          >
          </LineStep>
        )
      }

    }

    return(
      <View style={[styles.step_indicator, this.props.style || {}]}>
        {items}
      </View>
    )
  }

}

const styles = {
  step_indicator : {
    // flex: 1,
    backgroundColor: 'transparent',
    paddingTop:5,
    paddingBottom:10,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  step_number_text: {
    fontSize: 12,
    lineHeight: 14,
    color: '#8BC34A'
  },
  step_number_unfinished : {
    borderRadius : 50,
    width:24,
    height: 24,
    backgroundColor: 'rgba(0, 0, 0, 0.25)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  step_number_finished : {
    borderRadius : 50,
    width:24,
    height: 24,
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  step_number_current : {
    borderRadius : 50,
    width:24,
    height: 24,
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  line_step_unfinished: {
    backgroundColor: '#8BC34A',
   // backgroundColor: '#00420A',
    height: 3,
    marginLeft: 5,
    marginRight: 5,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  line_step_current: {
    backgroundColor: '#00420A',
    height: 3,
    marginLeft: 5,
    marginRight: 5,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  line_step_finished: {
    backgroundColor: '#00420A',
    height: 3,
    marginLeft: 5,
    marginRight: 5,
    width: 50,
    alignItems: 'center',
    justifyContent: 'center',
  }
}
