/**
 * @flow
 * Created by shiyunjie on 2018/8/4.
 */
import React from 'react';
import {
  View,
  Text,
  Image,
} from 'react-native';

type Props = {
  index : Number,
  data?: Array,
  height?: Number,
}

const screenWidth = global.SCREEN_WIDTH;


const Progress = (props : Props) => {
  let count = 3;
  let iconArr = [
    { title: '测试1' },
    { title: '测试2' },
    { title: '测试3' },
  ];
  if (props.data.length > 1) {
    iconArr = [];
    props.data.forEach((text) => {
      iconArr.push({ title: text });
    });
    count = props.data.length;
  }
  const { index: currentIndex } = props;
  const width = ((screenWidth / count) - (24)) / 2;
  return (
    <View
      style={{
        flexDirection: 'row',
        height: props.height || (100),
        alignItems: 'center',
        backgroundColor: '#fff',
      }}
    >
      {
        iconArr.map((item, index) => {
          let icon = currentIndex > index
            ? require('./images/icon_progresbar_complete.png')
            : require('./images/icon_progresbar_normal.png');

          if (currentIndex === index) {
            icon = require('./images/icon_progresbar_active.png');
          }

          const titleStyle = currentIndex >= index ? { color: '#0E6DCF' }
            : { color: '#999999' };
          return (
            <View
              key={`item${index}`}
              style={{
                width: (screenWidth / count),
                flexDirection: 'column',
                alignItems: 'center',
              }}
            >
              <Image
                style={{
                  width: (24),
                  height: (24),
                }}
                source={icon}
              />
              <Text style={[{ fontSize: (12), marginTop: (4) }, titleStyle]}>
                {item.title}
              </Text>
              { index < iconArr.length - 1
              && (
                <Image
                  style={{
                    width,
                    height: (24),
                    position: 'absolute',
                    top: 0,
                    left: (24) + width,
                  }}
                  source={require('./images/pic_progressbar_line.png')}
                />
              )
              }
              { index <= iconArr.length - 1 && index > 0
              && (
                <Image
                  style={{
                    width,
                    height: (24),
                    position: 'absolute',
                    top: 0,
                    left: 0,
                  }}
                  source={require('./images/pic_progressbar_line.png')}
                />
              )
              }
            </View>
          );
        })
      }
    </View>
  );
};

export default Progress;
