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

import Focus from './floor/Focus';

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

function mapStateToProps(store) {
  const { shareDetail } = store;
  return {
    shareDetail
  }
}

class ShareDetail extends Component {
  render() {
    let {shareDetail} = this.props;
    let shareDetailInfo = shareDetail ? shareDetail.toJS(): {};
    let productInfo = shareDetailInfo.productInfo;

    let isCollect = shareDetail.isCollect;
    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 style={styles.container}>
        <View style={[styles.navigatorBackground]}>
        </View>
        {/*<View style={styles.navigatorContainer}>
            <View style={[styles.navigatorBtn, styles.center]} >
              <TouchableOpacity onPress={() => this.props.goBack()}>
                <Image source={require('../images/home_drawer_back.png')} />
              </TouchableOpacity>
            </View>
          <View style={styles.navigatorBtnRightContainer}>
            <View style={[styles.navigatorBtn,styles.navigatorBtnRight]}>
              <TouchableOpacity onPress={() => null}>
                <Image source={require('../images/yh_prd_more_icon.png')} />
              </TouchableOpacity>
            </View>
          </View>
    </View>*/}
        <ScrollView
          style={styles.container}
          showsVerticalScrollIndicator={false}>
          <View style={[styles.imgContainer]}>
            <Focus
              data={imgList}
              height={480}
              resourceJumpWithUrl={this.props.resourceJumpWithUrl}
            />
          </View>
          <View style={styles.infoContainer}>
            <Text style={styles.name}>{productInfo.productName}</Text>
            <View style={styles.priceContainer}>
              <View style={styles.alignBottom}>
                <Text style={styles.priceUnit}>￥</Text>
                <Text style={styles.price}>{productPriceBo.salesPrice}</Text>
                <Text style={styles.origpriceUnit}>￥</Text>
                <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>
        </ScrollView>
        <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>
      </View>
    );
  }

  changeOpacity(e) {
    let opacity = 1 - (500 - e.nativeEvent.contentOffset.y) / 500;
    this.setState({opacity: opacity < 0.4 ? opacity : 0.4});
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  navigatorBackground: {
    height: 44 * DEVICE_WIDTH_RATIO,
    width,
    position: 'absolute',
    top: 0,
  },
  navigatorContainer: {
    backgroundColor: 'transparent',
    height: 44 * DEVICE_WIDTH_RATIO,
    flexDirection: 'row',
    alignItems: 'center',
  },
  navigatorBtn: {
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    height: 32 * DEVICE_WIDTH_RATIO,
    width: 32 * DEVICE_WIDTH_RATIO,
    overflow: 'hidden',
    borderRadius: 16 * DEVICE_WIDTH_RATIO,
    marginLeft: 9 * DEVICE_WIDTH_RATIO,
  },
  navigatorBtnRightContainer: {
    flex: 1,
    alignItems: 'flex-end',
  },
  navigatorBtnRight: {
    marginLeft: 0,
    marginRight: 9 * DEVICE_WIDTH_RATIO,
  },
  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: 122 * 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,
  }
})

export default connect(mapStateToProps)(ShareDetail);