import React, { Component } from 'react';
import { Dimensions, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { connect } from 'react-redux';

import RankBody from './RankBody';
import { List } 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');

function mapStateToProps(store) {
  return {
    talentRank: store.talentRank,
  }
}

class TalentRank extends Component {
  state = { monthRank: true }
  render() {
    const { monthRank } = this.state;
    let monthRankData = this.props.talentRank.monthRank;
    let totalRankData = this.props.talentRank.totalRank;
    let myRank = monthRank ? monthRankData.toJS() : totalRankData.toJS();
    let { amountStr, nickname, image, rankNum ,amount} = myRank;

    return (
      <View style={styles.container}>
        <View style={[styles.topContainer, styles.center]}>
          <View style={styles.btnWrapper}>
            <TouchableOpacity onPress={() => this._toggleRank(true)}>
              <View style={[styles.rankBtn, styles.center, monthRank ? styles.btnChoose : null]}>
                <Text style={[styles.rankBtnFont, monthRank ? styles.btnTextChoose : null]}>本月排行</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity style={styles.positionFixed} onPress={() => this._toggleRank(false)}>
              <View style={[styles.rankBtn, styles.center, !monthRank ? styles.btnChoose : null]}>
                <Text style={[styles.rankBtnFont, !monthRank ? styles.btnTextChoose : null]}>总排行</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.myRankContainer}>
          <View style={[styles.container, styles.leftContainer]}>
            <Text style={styles.amountName}>{`${monthRank ? '本月' : '总'}预估佣金`}</Text>
            <View style={styles.amountContainer}>
              <Text style={[styles.amountUnit,styles.textLeft]}>¥</Text>
              <Text style={[styles.amount,styles.textLeft]}>{amount}</Text>
            </View>
          </View>
          <View style={[styles.container, styles.middleContainer]}>
            {this._renderImage(image)}
            <Text style={styles.name} numberOfLines={1}>{nickname}</Text>
          </View>
          <View style={[styles.container, styles.rightContainer]}>
            <Text style={[styles.amountName, styles.textRight]}>排名</Text>
            <Text style={[styles.amountnoRank, styles.textRight, styles.marginTop5]}>{rankNum && rankNum != 0 ? rankNum : '未上榜'}</Text>
          </View>
        </View>
        <ScrollView ref="scrollView" style={styles.container}
          contentContainerStyle={styles.contentContainerStyle}
          horizontal={true}
          scrollEnabled={false} showsHorizontalScrollIndicator={false}>
            <RankBody
              monthRank={true}
              fetchNextPage={this._fetchNextPage}
              dataSource={monthRankData.get('rankList').get('list')}
              style={styles.container}/>
            <RankBody
              fetchNextPage={this._fetchNextPage}
              dataSource={totalRankData.get('rankList').get('list')}
              style={styles.container}/>
        </ScrollView>
      </View>
    );
  }

  componentDidMount() {
    this.props.actions.fetchTalentRank({
      type: 1,
      page: 1,
      pageSize: 10,
    });
    this.props.actions.fetchTalentRank({
      type: 2,
      page: 1,
      pageSize: 10,
    });
  }

  _toggleRank(monthRank) {
    // this.setState({height: 400});
    this.setState({monthRank: monthRank});
    const { scrollView } = this.refs;
    scrollView && (monthRank ? scrollView.scrollTo({x: 0, y: 0, animated: false}) : scrollView.scrollToEnd({animated: false}))
  }

  _renderImage(url) {
    if (url) {
      url = getSlicedUrl(url, 60 * DEVICE_WIDTH_RATIO, 60 * DEVICE_WIDTH_RATIO, 2);
      return <YH_Image style={styles.avatar} url={url} circle={true}></YH_Image>
    } else {
      return <Image source={require('../../groupPurchase/images/PT_head.png')} style={styles.avatar} />
    }
  }

  _fetchNextPage = (type) => {
    this.props.actions.fetchTalentRank({type});
  }
}

export default connect(mapStateToProps)(TalentRank)

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  topContainer: {
    height: 67 * DEVICE_WIDTH_RATIO,
  },
  btnWrapper: {
    width: 178 * DEVICE_WIDTH_RATIO,
    borderColor: '#444444',
    borderWidth: 1 * DEVICE_WIDTH_RATIO,
    borderRadius: 4 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
  },
  rankBtn: {
    width: 92 * DEVICE_WIDTH_RATIO,
    height: 36 * DEVICE_WIDTH_RATIO,
    borderRadius: 3 * DEVICE_WIDTH_RATIO,
  },
  rankBtnFont: {
    fontSize: 14,
    fontFamily: 'PingFang-SC-Regular',
    color: '#444444',
  },
  btnChoose: {
    backgroundColor: '#444444',
  },
  btnTextChoose: {
    color: 'white'
  },
  myRankContainer: {
    height: 124 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
  },
  leftContainer: {
    paddingLeft: 30 * DEVICE_WIDTH_RATIO,
    paddingTop: 27 * DEVICE_WIDTH_RATIO,
  },
  amountName: {
    fontFamily: 'PingFang-SC-Regular',
    fontSize: 12,
    color: '#B0B0B0',
    lineHeight: 17,
  },
  amountContainer: {
    marginTop: 10 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
  },
  amountUnit: {
    fontSize: 14,
    lineHeight: 24,
    fontWeight: '500',
    textAlignVertical: 'bottom',
    includeFontPadding: false,
    color: '#444444',
  },
  amount: {
    fontSize: 24,
    lineHeight: 24,
    fontWeight: '500',
    textAlignVertical: 'bottom',
    includeFontPadding: false,
    color: '#000000',
  },
    amountnoRank: {
        fontSize: 20,
        lineHeight: 24,
        fontWeight: '500',
        textAlignVertical: 'bottom',
        includeFontPadding: false,
        color: '#000000',
    },
  middleContainer: {
    paddingTop: 14 * DEVICE_WIDTH_RATIO,
    alignItems: 'center',
  },
  avatar: {
    height: 60 * DEVICE_WIDTH_RATIO,
    width: 60 * DEVICE_WIDTH_RATIO,
    overflow: 'hidden',
    borderRadius: 30 * DEVICE_WIDTH_RATIO,
  },
  name: {
    fontFamily: 'PingFang-SC-Medium',
    fontSize: 14,
    lineHeight: 20,
    marginTop: 10 * DEVICE_WIDTH_RATIO,
    fontWeight: '500',
  },
  rightContainer: {
    paddingRight: 30 * DEVICE_WIDTH_RATIO,
    paddingTop: 27 * DEVICE_WIDTH_RATIO,
  },
  textRight: {
    textAlign: 'right',
  },
  textLeft: {
    textAlign: 'left',
  },
  marginTop5: {
    marginTop: 5 * DEVICE_WIDTH_RATIO,
  },
  
  positionFixed: {
    position: 'absolute',
    right: 0,
  },
  contentContainerStyle: {
    width: 2 * width,
  }
});