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

import Focus from './floor/Focus';
import ProductCell from './recommend/ProductCell';

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

export default class ShareDetail extends Component {

  constructor(props) {
      super(props);
      this._renderRow = this._renderRow.bind(this);
      this._renderHeader = this._renderHeader.bind(this);
      this._renderBottom = this._renderBottom.bind(this);

      this.dataSource = new ListView.DataSource({
          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
          sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
      });
  }

  _renderBottom(productInfo,isCollect) {
    return (
      <View style={styles.bottomBar}>
        <View style={[styles.favContainer, styles.center]}>
          <TouchableOpacity activeOpacity={0.8} onPress={() => this.props.addFavorite()} style={[styles.center]}>
            <Image
              style={styles.favorite}
              resizeMode="contain"
              source={isCollect === 'Y' ? require('../../recorder/images/brand/heart_ic_h.png') : require('../../recorder/images/brand/heart_ic_n.png')} />
            <Text style={styles.favText}>收藏</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.buttonContainer}>
          <TouchableOpacity activeOpacity={0.8} onPress={() => this.props.jumpWithUrl()}>
            <View style={[styles.button, styles.center]}>
              <Text style={styles.btnText}>查看商品详情</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.8} onPress={() => this.props.showShareView(productInfo)}>
            <View style={[styles.button, styles.center, styles.red]}>
              <Text style={styles.btnText}>{'分享可赚￥' + productInfo.rebatesAmount}</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
  _renderRow(rowData, sectionID, rowID) {
    switch (sectionID) {
        case 'productList': {
          return (
              <ProductCell
                  style={styles.listContainer}
                  key={'row' + rowID}
                  rowID={rowID}
                  data={rowData}
                  onPressProduct={this.props.onPressProduct}
              />
          );
        }
      }
  }

  _renderHeader() {

    let {shareDetail} = this.props;
    let shareDetailInfo = shareDetail ? shareDetail.toJS(): {};
    let productInfo = shareDetailInfo.productInfo;
    if (!productInfo || productInfo == {}) {
      return null
    }
    let goodsList = productInfo.goodsList;
    let productPriceBo = productInfo.productPriceBo;
    let goodsInfo = goodsList ? goodsList[0] : {};
    if (!goodsInfo || !productPriceBo) {
      return null
    }
    let goodsImagesList = goodsInfo ? goodsInfo.goodsImagesList: null;
    let imgList = goodsImagesList && goodsImagesList.map(item => ({src: item.imageUrl}));
    imgList = Immutable.fromJS(imgList);

    return (
      <View>
        <View style={[styles.imgContainer]}>
          <Focus
            data={imgList}
            height={480}
            resourceJumpWithUrl={this.props.resourceJumpWithUrl}
          />
        </View>
        <View style={styles.infoContainer}>
          <Text style={styles.name} numberOfLines={1}>{productInfo.productName}</Text>
          <View style={styles.priceContainer}>
            <View style={styles.alignBottom}>
              <Text style={styles.priceUnit}>￥</Text>
              <Text style={styles.price}>{productPriceBo.salesPrice}</Text>
                {productPriceBo.salesPrice !== productPriceBo.marketPrice  && <Text style={styles.origpriceUnit}>￥</Text>}
                {productPriceBo.salesPrice !== productPriceBo.marketPrice  && <Text style={styles.origPrice}>{productPriceBo.marketPrice}</Text>}
            </View>
          </View>
        </View>
        <View style={styles.divider} />
        <View style={styles.promContainer}>
          <Text style={styles.proDesc}>{productInfo.phrase}</Text>
        </View>
        <View style={styles.recommendContainer}>
          <View style={styles.solid} />
            <Text style={styles.recommendText}>查看其它推荐商品</Text>
          <View style={styles.solid} />
        </View>
      </View>
    );
  }

  render() {
    let {shareDetail} = this.props;
    let shareDetailInfo = shareDetail ? shareDetail.toJS(): {};
    let productInfo = shareDetailInfo.productInfo;
    let isCollect = shareDetail.isCollect;
    let productList = shareDetail.productList;
    let product_List = productList.product_list ? productList.product_list.toArray() : [];
    let dataSource = {
        productList: product_List,
    };

    return (
      <View style={styles.container}>
        <ListView
            contentContainerStyle={styles.contentContainer}
            enableEmptySections={true}
            dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
            renderRow={this._renderRow}
            renderHeader={this._renderHeader}
            onEndReached={() => {
                if (product_List.size !== 0) {
                    this.props.onEndReached && this.props.onEndReached();
                }
            }}
        />
        {this._renderBottom(productInfo,isCollect)}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
      flexDirection: 'row',
      flexWrap: 'wrap',
      backgroundColor: 'white'
  },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  imgContainer: {
    height: 480 * DEVICE_WIDTH_RATIO,
  },
  name: {
    fontSize: 16,
    color: '#444444',
    lineHeight: 22,
  },
  border: {
    borderTopWidth: 1,
    borderColor: '#5d5d5d'
  },
  infoContainer: {
    height: 102 * DEVICE_WIDTH_RATIO,
    paddingTop: 15 * DEVICE_WIDTH_RATIO,
    paddingHorizontal: 15 * DEVICE_WIDTH_RATIO,
  },
  priceContainer: {
    height: 60 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    alignItems: 'center',
  },
  alignBottom: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  priceUnit: {
    fontSize: 14,
    color: '#D0021B',
    lineHeight: 22,
  },
  price: {
    fontSize: 22,
    color: '#D0021B',
    lineHeight: 22,
  },
  origpriceUnit: {
    marginLeft: 7 * DEVICE_WIDTH_RATIO,
    fontSize: 14,
    lineHeight: 20,
    textDecorationLine: 'line-through',
    textDecorationStyle: 'solid',
    textDecorationColor: '#B0B0B0',
    color: '#B0B0B0',
  },
  origPrice: {
    fontSize: 14,
    lineHeight: 20,
    textDecorationLine: 'line-through',
    textDecorationStyle: 'solid',
    textDecorationColor: '#B0B0B0',
    color: '#B0B0B0',
  },
  divider: {
    height: 10 * DEVICE_WIDTH_RATIO,
    backgroundColor: '#F0F0F0'
  },
  promContainer: {
    height: 50 * DEVICE_WIDTH_RATIO,
    paddingHorizontal: 15 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    alignItems: 'center',
  },
  proDesc: {
    color: '#444444',
    fontSize: 12,
    lineHeight: 17,
  },
  recommendContainer: {
    height: 51 * DEVICE_WIDTH_RATIO,
    backgroundColor: '#F0F0F0',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  solid: {
    borderColor: '#E0E0E0',
    width: 54.5 * DEVICE_WIDTH_RATIO,
    borderWidth: 0.5 * DEVICE_WIDTH_RATIO,
  },
  recommendText: {
    marginHorizontal: 6 * DEVICE_WIDTH_RATIO,
    fontWeight: 'bold',
    fontSize: 12 * DEVICE_WIDTH_RATIO,
    color: '#B0B0B0'
  },
  bottomBar: {
    flexDirection: 'row',
    height: 60 * DEVICE_WIDTH_RATIO,
    alignItems: 'center',
  },
  favContainer: {
    width: 72 * DEVICE_WIDTH_RATIO,
    marginHorizontal: 8 * DEVICE_WIDTH_RATIO,
  },
  favorite: {
    width: 21 * DEVICE_WIDTH_RATIO,
    height: 21 * DEVICE_WIDTH_RATIO,
  },
  favText: {
    fontSize: 9* DEVICE_WIDTH_RATIO,
    color: '#B0B0B0',
    marginTop: 5* DEVICE_WIDTH_RATIO,
  },
  buttonContainer: {
    flex: 1,
    marginRight: 15 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  button: {
    backgroundColor: '#444444',
    borderRadius: 4 * DEVICE_WIDTH_RATIO,
    height: 44 * DEVICE_WIDTH_RATIO,
    width: 130 * DEVICE_WIDTH_RATIO,
    alignItems: 'center',
    justifyContent: 'center',
  },
  red: {
    backgroundColor: '#D0021B'
  },
  btnText: {
    color: '#FFFFFF',
    fontSize: 15,
  },
  listContainer: {
      width: width,
  },
})