'use strict';

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

import YH_Image from '../../common/components/YH_Image';
import { getSlicedUrl } from '../../classify/utils/Utils';

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

export default class InviteYoho 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),
        });

        this._renderImageHeader = this._renderImageHeader.bind(this);
      }

      _renderImageHeader() {
        let { resourceInfo } = this.props;
        let imgHeight = 0, imageUrl = '';

        resourceInfo.resourceList && resourceInfo.resourceList.forEach(item => {

          item = item && item.toJS();
          if (item.template_name === 'splitJointImg' && item.data) {
            imageUrl = item.data.src;

            let imageWidth = item.image_width;
            let imageHeight = item.image_height;
            imgHeight = Math.ceil(width * imageHeight / imageWidth);
          }
        });

        return (
          <View>
              <View style={{width: width, height: imgHeight}}>
                <YH_Image url={YH_Image.getSlicedUrl(imageUrl, width, imgHeight, 2)} resizeMode={'stretch'} style={{ width: width, height: imgHeight}}/>
                <TouchableOpacity activeOpacity={1} style={styles.activityStyle} onPress={() => {
                    this.props.jumpToResourceUrl && this.props.jumpToResourceUrl();
                }}>
                </TouchableOpacity>
              </View>

              <View style={styles.spaceView}/>

              <View style={styles.headView}>
                <Text style={styles.titleStyle}>邀请记录</Text>
              </View>

              <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}>邀新返佣</Text>
                  </View>
                  <View style={styles.textItemStyle}>
                      <Text style={styles.textsStyle}>首单返佣</Text>
                  </View>
              </View>

              <View style={styles.lineView}/>

          </View>

        )
      }

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

                   <View style={styles.rowItemStyle}>
                      <Text style={styles.nameItemStyle} numberOfLines={1}>{rowData.get("nickname")}</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("amountStr")}</Text>
                   </View>
                    <View style={styles.rowItemStyle}>
                        <Text style={styles.rowTextStyle}>{rowData.get("orderAmountStr")}</Text>
                    </View>

                </View>

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

    _renderFooter() {
      let emptyViewShow = this.props.inviteYohoList.list.toJS().length===0 ? true : false;
      return (
        <View>
          { emptyViewShow && this.props.isFetching === false ?
            <View style={styles.emptyView}>
                <Text style={styles.textsStyle}>快去邀请好友吧！</Text>
            </View>
            :
            <View style={[{height: 10}, {backgroundColor: 'white'}, {justifyContent:'center'}]}/>
          }
        </View>
      )
    }


    render() {
      let { inviteYohoList } = this.props;
      let inviteList = inviteYohoList.list ? inviteYohoList.list.toArray() : [];

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

              {this._renderImageHeader()}

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

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

            </ScrollView>

            <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',
  },
  listStyle: {
    maxHeight: 500,
    marginBottom: 50*DEVICE_WIDTH_RATIO
  },
  headView: {
    width: width,
    height: 50 * DEVICE_WIDTH_RATIO,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  middleView: {
    backgroundColor: 'white',
    height: 50 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    alignItems: 'center',
  },
   textItemStyle: {
     width: width / 4,
     alignItems: 'center',
    },
  titleStyle: {
    fontFamily: 'PingFang-SC-Medium',
    fontWeight: 'bold',
    fontSize: 17,
    color: '#222222',
    textAlign: 'center',
  },
  textsStyle: {
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 14,
    color: '#b0b0b0',
  },
  rowView: {
    height: 50 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    alignItems: 'center',
  },
  rowItemStyle: {
    width: width / 4,
    alignItems: 'center',
    paddingVertical: 15,
  },
  nameItemStyle: {
    width: width/-25,
    fontFamily: 'P4ingFang-SC-Regular',
    fontSize: 11,
    color: '#444444',
    textAlign: 'center',
  },
  rowTextStyle: {
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 11,
    color: '#444444',
  },
  buttonStyle: {
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 16,
    color: 'white',
    textAlign: 'center',
  },
  touchableStyle: {
    position: 'absolute',
    width: width,
    height: 50,
    bottom: 0,
    borderRadius: 2,
    backgroundColor: '#444444',
    justifyContent: 'center'
  },
  activityStyle: {
    width: 80,
    height: 30,
    borderRadius: 2,
    position: 'absolute',
    top: 10,
    right: 5,
  },
  lineView: {
    height: 0.5,
    backgroundColor: '#e0e0e0',
    marginLeft: 15,
    marginRight: 15,
  },
  spaceView: {
    height: 10 * DEVICE_WIDTH_RATIO,
    backgroundColor: '#F0F0F0'
  },
  emptyView: {
    width: width,
    height: 175,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
});