'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import ListCell from './ListCell';
import ListBannerSwiper from './ListBannerSwiper';
import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';

import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform,
    RefreshControl,
} from 'react-native';


export default class List extends Component {

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

    renderRow(rowData,sectionID,rowID,highlightRow) {
    	switch (sectionID) {
    		case 'banner': {
          return <ListBannerSwiper resource={rowData} onPressBanner={this.props.onPressBanner}/>
    		}
    		break;
    		case 'list': {
    			return <ListCell resource={rowData} onPressDetail={this.props.onPressDetail} index={rowID}/>;
    		}
    		break;
    	}
      return null;
    }


    render() {
    	let {products, banner} = this.props.resource;
      let isProductListFetching = products.isFetching;

    	let list = [];
        if (products.list && products.list.toJS()) {
            list = products.list.toJS();
        }
      let bannerData = [];
      if (banner.data && banner.data.toJS()) {
        let bannerDataArray = banner.data.toJS();
        if (bannerDataArray.length > 0) {
          bannerData = bannerDataArray[0].data;
        }
      }
    	let dataBlob = {
    		'banner': bannerData.length ? [bannerData] : [],
    		'list': list ? list : [],
    	};
        let isFetching = (products.isFetching&&!products.ptr&&!dataBlob.list.length);
        let isFetchingAndroid = !products.isFetching && !banner.isFetching;
      return (
          <View style={styles.container}>
              {
                  Platform.OS === 'ios' ?
                  <ListView
                  contentContainerStyle={styles.contentContainer}
                  enableEmptySections={true}
                  showsVerticalScrollIndicator={false}
                  dataSource={this.dataSource.cloneWithRowsAndSections(dataBlob)}
                  renderRow={this.renderRow}
                  enablePullToRefresh={true}
                  isOnPullToRefresh={isProductListFetching&&products.ptr}
                  onRefreshData={() => {
                      this.props.onRefresh && this.props.onRefresh();
                  }}
                  onEndReached={() => {
                      if (list && list.length) {
                          this.props.onEndReached && this.props.onEndReached();
                      }
                  }}
                  renderFooter={()=>{
                      if (list && list.length && isProductListFetching) {
                          return <LoadMoreIndicator
                                  isVisible={true}
                                  animating={true}
                              />;
                      } else {
                          return null;
                      }
                  }}
                  />
              :  <ListView
                          contentContainerStyle={styles.contentContainer}
                          enableEmptySections={true}
                          showsVerticalScrollIndicator={false}
                          dataSource={this.dataSource.cloneWithRowsAndSections(dataBlob)}
                          renderRow={this.renderRow}
                          enablePullToRefresh={true}
                          refreshControl={
                            <YH_PtrRefresh
                                refreshing={isFetchingAndroid}
                                onRefresh={() => {
                                    this.props.onRefresh && this.props.onRefresh();
                                }}
                            />
                        }

                          onEndReached={() => {
                      if (list && list.length) {
                          this.props.onEndReached && this.props.onEndReached();
                      }
                  }}
                          renderFooter={()=>{
                      if (list && list.length && isProductListFetching) {
                          return <LoadMoreIndicator
                                  isVisible={true}
                                  animating={true}
                              />;
                      } else {

                          return null;
                      }
                  }}
                      />

              }
          </View>
      );
    }
}

let {width, height} = Dimensions.get('window');

let rowWidth = Math.ceil(137.5 * width / 320);
let rowHeight = Math.ceil(254 * width / 320);
let rowMarginTop = Math.ceil(10 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
    },
    contentContainer:{
        backgroundColor: 'white',
        flexDirection:  'row',
        flexWrap: 'wrap'

    },
    listContainer: {
        width: width / 2,
    },
    footer: {
        width: width,
        height: 59,
        borderColor: '#ededed',
        borderTopWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
    },
    detailButton: {
        position: 'absolute',
        width: 100,
        height: 44,
        top: 7,
        left: width - 15 - 100,
        backgroundColor: '#d0021b',
        borderRadius: 4,
        alignItems: 'center',
    },
    detailButtonText: {
        marginTop: 4,
        height: 36,
        color: 'white',
        paddingTop: 10,
        textAlign: 'center',
        fontSize: 15,
    },
    favoriteButton: {
        width: 100,
        height: 40,
    },
    favIcon: {
        width: 17,
        height: 16,
        marginLeft: 20,
        marginRight: 0,
    },
    favText: {
        fontSize: 13,
        color: '#b0b0b0',
        marginLeft: 5,
    },
});