import React, {Component} from 'react';
import {Dimensions, Image, ImageBackground, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import ListView from 'deprecated-react-native-listview'
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) {
        let rebatesPrice = this.props.collage_activity_id && this.props.collage_activity_id != -1 ? this.props.collage_rebates_amount : productInfo.rebatesAmount;
        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}>{'分享可赚￥' + rebatesPrice}</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);

        let activityId = this.props.collage_activity_id;
        let salesPrice = activityId && activityId != -1 ? this.props.collage_price : productPriceBo.salesPrice;
        let groupWidth = activityId && activityId != -1 ? 50 : 0;

        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}>{salesPrice}</Text>
                            {productPriceBo.salesPrice !== productPriceBo.marketPrice &&
                            <Text style={styles.origpriceUnit}>￥</Text>}
                            {productPriceBo.salesPrice !== productPriceBo.marketPrice &&
                            <Text style={styles.origPrice}>{productPriceBo.marketPrice}</Text>}
                            <Image source={require('../images/Group3.png')}
                                   style={{marginLeft: 10, height: 17, width: groupWidth}}/>
                        </View>
                    </View>
                </View>

                {(productInfo.rebatesAmount && productInfo.percentStr) ?
                    <View style={styles.promContainer}>
                        <ImageBackground
                            style={styles.promBg}
                            resizeMode={'stretch'} source={require('../images/alliancePromoteBg.png')}>
                            <Image source={require('../images/moneySymbol.png')}
                                   style={{marginLeft: 5, height: 22, width: 22}}/>
                            <View style={styles.promBgTextV}>
                                <Text style={styles.proDescNormal}>{'返现 '}</Text>
                                <Text style={styles.proDescRed}>{productInfo.percentStr}</Text>
                                <Text style={styles.proDescNormal}>{'，预计可返 '}</Text>
                                <Text style={styles.proDescRed}>{'¥'+productInfo.rebatesAmount}</Text>
                            </View>
                        </ImageBackground>
                    </View>
                    : null}

                <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: 45 * DEVICE_WIDTH_RATIO,
        paddingHorizontal: 15 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
    },
    promBg: {
        height: 30,
        width: 345 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
        alignItems: 'center',
    },
    promBgTextV: {
        marginLeft: 10,
        flexDirection: 'row',
        alignItems: 'center',
    },
    proDescNormal: {
        color: '#997509',
        fontSize: 12,
        fontWeight: 'bold',
        lineHeight: 17,
    },
    proDescRed: {
        color: '#d0021b',
        fontSize: 12,
        fontWeight: 'bold',
        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,
    },
})