'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 GroupDetailHeader from './GroupDetailHeader';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';

export default class GroupPurchaseDetail 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 {
            groupDetail,
            activityId,
        } = this.props;

        return (
          <GroupDetailHeader
            activityId={activityId}
            groupDetail={groupDetail}
            updateTime={this.props.updateTime}
            didTouchButton={this.props.didTouchButton}
            goComment={this.props.goComment}
            didTouchProduct={this.props.didTouchProduct}
          />
        );
    }

    _renderRow(rowData, sectionID, rowID) {

      switch(sectionID) {

          case 'productResourceInfo': {

            if(!rowData || !rowData.get('data')){
                return null;
            }
            let infoData = rowData.get('data');

            let imageWidth = infoData.get('imageWidth');
            let imageHeight = infoData.get('imageHeight');

            let listInfo = infoData.get('list').toJS();
            let item = listInfo[0];

            let src = YH_Image.getSlicedUrl(item.src, imageWidth, imageHeight, 2);

              return(
                <View style={{width:width, height:70*DEVICE_WIDTH_RATIO+8, backgroundColor:'#f0f0f0'}}>
                  <View style={{width:width, height:70*DEVICE_WIDTH_RATIO}}>
                    <TouchableOpacity activeOpacity={1} onPress={() => {
                      this.props.didTouchBanner && this.props.didTouchBanner(item.url);
                    }}>
                      <YH_Image style={{width: '100%', height: '100%'}} url={src}></YH_Image>
                    </TouchableOpacity>
                  </View>
                </View>
              );
          }

          case 'productListTitle': {
              return(
                <View style={styles.productListheader}>
                  <View style={styles.productListheaderSub}>
                    <Text style={styles.title}>查看其他拼团商品</Text>
                  </View>
                </View>
              );
          }

          case 'productList': {
              return(
                <GroupProductCell resource={rowData} didTouchProduct={this.props.didTouchProduct}/>
              );
          }
          default:
              return null;
      }
    }

    render() {
        let {
            productList,
            resource,
        } = this.props;
        let dataSource = {
            productResourceInfo: resource.resourceList ? resource.resourceList.toArray() : [],
            productListTitle: [2],
            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>
        );
    }

}


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

let styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        productListheader: {
            flex: 1,
            justifyContent: 'center',
            alignItems:'center',
        },
        productListheaderSub: {
          width,
          height: 40*DEVICE_WIDTH_RATIO,
          justifyContent: 'center',
          alignItems: 'center',
        },
        title: {
          fontSize: 16,
          fontWeight: 'bold',
          color: '#444444',
        },
    })
;