'use strict'

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

import {Immutable, Map} from 'immutable';
import ReceiveGiftAlert from './ReceiveGiftAlert';
import ProductListCell from '../../common/components/ListCell/ProductListCell';
import CouponsBagListCell from "./CouponsBagListCell";

export default class AssociatorGift extends Component {
    constructor(props) {
        super(props);

        this._renderRow = this._renderRow.bind(this);
        this._renderHeader = this._renderHeader.bind(this);

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

    }

    _renderHeader() {
        let total = this.props.couponsBagCnt.total;
        let title = total > 0 ? '您有' + total + '个礼包可领取' : '暂无可领取的礼包';
        let desc = total > 0 ? '以下是近期礼包' : '';
        let heightStyle = total > 0 ? {height: 45} : {height: 35};
        return (
            <View style={styles.bagBackground}>
                <View style={styles.header}/>
                <Image style={styles.bgImage} source={require('../images/hyzx_lb.png')}/>
                <Text style={styles.bagTitle}>{title}</Text>
                <Text style={[styles.bagTips, heightStyle]}>{desc}</Text>
            </View>
        )
    }

    _renderRow(rowData, sectionID, rowID) {
        let paddingLeft = rowID % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
        let customStyle = rowID === 0 || rowID === 1 ? {paddingLeft} : {paddingLeft};

        switch (sectionID) {
            case 'couponsBag': {
                return (
                    <CouponsBagListCell
                        style={[styles.listContainer, customStyle]}
                        key={'row' + rowID}
                        rowID={rowID}
                        data={rowData}
                        onPressGiftBag={this.props.onPressGiftBag}
                        showGiftAlert={this.props.showGiftAlert}
                        hiddenGiftAlert={this.props.hiddenGiftAlert}
                    />
                );
            }
            case 'productListTitle': {
                return (
                    <View>
                        <View style={{height:10, backgroundColor: '#444444'}}/>
                        <View style={styles.titleView}>
                            <View style={styles.titleLine}/>
                            <View style={styles.ViewForTextStyle}>
                                <Text style={styles.textStyle}>你可能喜欢</Text>
                            </View>
                        </View>
                        <View style={styles.titleBottomLine}/>
                    </View>
                )
            }
            case 'productList': {
                return (
                    <ProductListCell
                        style={[styles.listContainer, customStyle]}
                        key={'row' + rowID}
                        rowID={rowID}
                        data={rowData}
                        onPressProduct={this.props.onPressProduct}
                        needShopCar={true}
                        onPressShopCar={this.props.onPressShopCar}
                    />
                );
            }
            default:
                return null;
        }
    }

    render() {
        let {
            showGiftAlert,
            couponsBag,
            productList,
            drawCouponsBag
        } = this.props;

        let dataSource = {
            couponsBag: couponsBag.couponsBag_list ?  couponsBag.couponsBag_list.toArray(): [],
            productListTitle: ['猜你喜欢'],
            productList: productList.product_list ? productList.product_list.toArray() : [],
        };

        let drawCouponsBag_list = drawCouponsBag.drawCouponsBag_list.toArray();
        return (
            <View style={styles.container}>
                <ReceiveGiftAlert
                    data={drawCouponsBag_list}
                    showGiftAlert={showGiftAlert}
                    hiddenGiftAlert={this.props.hiddenGiftAlert}
                    onPressCouponItem={this.props.onPressCouponItem}
                    onPressLookDetail={this.props.onPressLookDetail}
                />
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    yh_viewVisible={true}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    renderHeader={this._renderHeader}
                />
            </View>
        );
    }
};

let {width, height} = Dimensions.get('window');
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;

let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    header: {
      backgroundColor: '#444444',
      width,
      height: 500,
      flex: 1,
      position: 'absolute',
      top: -500,
      left: 0,
    },
    bagBackground: {
        width: width,
        alignItems: 'center',
        backgroundColor: '#444444',
        position: 'relative'
    },
    bgImage: {
        width: 50,
        height: 57.4,
        marginTop: 39,
        marginBottom: 15.6
    },
    bagTitle: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 14,
        color: '#FFFFFF',
    },
    bagTips: {
        height: 45,
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 12,
        color: '#B0B0B0',
        paddingTop: 4,
    },
    titleView: {
        width: width,
        height: 40,
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    titleLine: {
        width: 2,
        height: 15,
        marginLeft: 15,
        marginTop: 12.5,
        backgroundColor: 'black'
    },
    ViewForTextStyle: {
        height: 40,
        marginLeft: 10,
        justifyContent: 'center',
    },
    textStyle: {
        fontSize: 16,
        fontWeight: 'bold',
    },
    titleBottomLine: {
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0'
    },
    contentContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: 'white'
    },
    listContainer: {
        width: width / 2,
    },
});