'use strict';

import React, {Component} from 'react';
import {Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {Immutable} from 'immutable';
import GroupProductCell from './GroupProductCell'
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';

export default class GroupPurchase 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 {
            productList,
        } = this.props;
        let banner = productList.banner;
        let url = productList.url;
        console.log('banner', banner);

        if(banner === '') return null;
        
        return (
          <View style={styles.header}>
            <TouchableOpacity activeOpacity={1} onPress={() => {
              this.props.didTouchBanner && this.props.didTouchBanner(url);
            }}>
              <YH_Image style={{width: '100%', height: '100%'}} url={banner}></YH_Image>
            </TouchableOpacity>
          </View>
        );
    }

    _renderRow(rowData, sectionID, rowID) {
        return (
          <GroupProductCell resource={rowData} didTouchProduct={this.props.didTouchProduct}/>
        );
    }

    goMyPurchaseOrder() {
        this.props.jumpToMinePurchaseOrder();
    }

    render() {
        let {
            productList,
            resource,
        } = this.props;
        let dataSource = {
            productList: productList.list ? productList.list.toArray() : [],
        };

        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    renderHeader={this._renderHeader}
                    onEndReached={() => {
                        if (productList && productList.list && productList.list.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                />
                <View style={styles.bottom}>
                    <TouchableOpacity onPress={() => this.goMyPurchaseOrder()} style={styles.center}>
                        <Text style={styles.myPurchaseText}>我的拼团</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

}


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

let styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        header: {
          width,
          height: 121*DEVICE_WIDTH_RATIO,
        },
        bottom: {
            height: 44,
            borderTopWidth: 1,
            borderColor: '#e0e0e0',
        },
        center: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
        },
        myPurchaseText: {
            fontFamily: 'PingFang-SC-Medium',
            fontSize: 14,
            color: '#444444',
        }
    })
;