'use strict';

import React, { Component } from 'react';
import { Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { Immutable } from 'immutable';

const DEVICE_WIDTH_RATIO = Dimensions.get('window').width / 375;
const { width } = Dimensions.get('window');


export default class InvitedFriends extends Component {

      constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);
        this._renderFooter = this._renderFooter.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
      }

      _renderRow(rowData, sectionID, rowID) {
        return (
            <View>
                <View style={styles.rowView}>

                   <View style={styles.rowItemStyle}>
                      <Text style={styles.nameItemStyle} numberOfLines={1}>{rowData.get("name")}</Text>
                   </View>

                   <View style={styles.rowItemStyle}>
                      <Text style={styles.rowTextStyle}>{rowData.get("dateStr")}</Text>
                   </View>

                   <View style={styles.rowItemStyle}>
                      <Text style={styles.rowTextStyle}>{rowData.get("orderNum")}</Text>
                   </View>

                   <View style={styles.rowItemStyle}>
                      <Text style={styles.rowTextStyle}>{rowData.get("orderAmountStr")}</Text>
                   </View>
                
                </View>

                <View style={styles.lineView}/>
            </View>
        );
    }

    _renderFooter(){
      return (
          <View style={[{height: 50}, {backgroundColor: 'white'}, {justifyContent:'center'}]}>
              <Text style={{textAlign: 'center', fontFamily: 'PingFang-SC-Regular', fontSize: 12, color: '#B0B0B0',}}>暂无更多数据</Text>
          </View>
      )
    }

      render() {

        let {
            invitedFriendsList,
        } = this.props;
        let invitersList = invitedFriendsList.list ? invitedFriendsList.list.toArray() : [];

        return (
          <View style={styles.container}>

            <View style={styles.topImageView}>
              <Image style={styles.topImageView} source={{uri:'https://cdn.yoho.cn/app/yohogain/invite/banner.jpg'}} resizeMode={'contain'}/>
            </View>

            <View style={styles.spaceView}/>

            <View style={styles.middleView}>

              <View style={styles.textItemStyle}>
                <Text style={styles.textsStyle}>我邀请的好友</Text>
              </View>

              <View style={styles.textItemStyle}>
                <Text style={styles.textsStyle}>申请时间</Text>
              </View>

              <View style={styles.textItemStyle}>
                <Text style={styles.textsStyle}>7天订单数</Text>
              </View>

              <View style={styles.textItemStyle}>
                <Text style={styles.textsStyle}>7天订单金额</Text>
              </View>
              
            </View>

            <View style={styles.lineView}/>

            <ListView
              ref={(c) => {
                  this.listView = c;
              }}
              contentContainerStyle={styles.contentContainer}
              enableEmptySections={true}
              dataSource={this.dataSource.cloneWithRows(invitersList)}
              renderRow={this._renderRow}
              renderFooter={this._renderFooter}

              onEndReached={() => {
                  if (invitersList.size !== 0) {
                      this.props.onEndReached && this.props.onEndReached();
                  }
              }}/>

            <TouchableOpacity activeOpacity={1} style={styles.touchableStyle} onPress={() => {
                this.props.shareForInvite && this.props.shareForInvite();
            }}>
              <Text style={styles.buttonStyle}>邀请好友加入有货推手</Text>
            </TouchableOpacity>

          </View>
        );
    }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  contentContainer: {
      width: width,
      backgroundColor: 'white',
      paddingBottom: 55 * DEVICE_WIDTH_RATIO,
  },
  topImageView: {
    width: width,
    height: 118 * DEVICE_WIDTH_RATIO,
  },
  middleView: {
    backgroundColor: 'white',
    height: 50 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    alignItems: 'center',
  },
  textItemStyle: {
    width: width / 4,
    alignItems: 'center',
    paddingVertical: 18,
  },
  textsStyle: {
    fontFamily: 'PingFang-SC-Medium',
    fontSize: 12,
    color: '#444444',
  },
  rowView: {
    height: 50 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    alignItems: 'center',
  },
  rowItemStyle: {
    width: width / 4,
    alignItems: 'center',
    paddingVertical: 15,
  },
  nameItemStyle: {
    width: width/4-25,
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 11,
    color: '#444444',
    textAlign: 'center',
  },
  rowTextStyle: {
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 11,
    color: '#444444',
  },
  buttonStyle: {
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 16,
    fontWeight: 'bold',
    color: '#FFFFFF',
    textAlign: 'center',
  },
  touchableStyle: {
    position: 'absolute', 
    width: width, 
    height: 55, 
    bottom: 0, 
    borderRadius: 2, 
    backgroundColor: '#D0021B', 
    justifyContent: 'center'
  },
  lineView: {
    height: 0.5,
    backgroundColor: '#e0e0e0'
  },
  spaceView: {
    height: 10 * DEVICE_WIDTH_RATIO,
    backgroundColor: '#F0F0F0'
  },
});