'use strict';

import React, { Component } from 'react';
import { Platform, Dimensions, ListView, Image, StyleSheet, View ,Text, TouchableOpacity} from 'react-native';
import { Immutable } from 'immutable';
import TimerMixin from 'react-timer-mixin';
import ProductCell from './cell/productCell';
import Focus from './floor/Focus';
import YH_PtrRefresh from '../../common/components/YH_PtrRefresh';

const DEVICE_WIDTH_RATIO = Dimensions.get('window').width / 375;

export default class HaggleList extends Component {
  constructor(props) {
    super(props);
    this._renderRow = this._renderRow.bind(this);
    this._changeCategory = this._changeCategory.bind(this);
    this._trigggePullToRefresh = this._trigggePullToRefresh.bind(this);
    this.dataSource = new ListView.DataSource({
        rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
    });
}

componentDidMount() {
    this._trigggePullToRefresh();
}

_trigggePullToRefresh() {
  let {
      categoryType,
  } = this.props;

}

componentWillUnmount() {
    this.timer && TimerMixin.clearTimeout(this.timer);
}

  _renderResourceInfoListRow(item) {
    if (item.get('template_name') === 'focus' && item.get('data')) {
      return (
        <View style={styles.topImageView}>
          <Focus
              data={item.get('data')}
              height={121}
              resourceJumpWithUrl={this.props.resourceJumpWithUrl}
          />
        </View>

      );
    }
    return null;
  }

_renderRow(rowData, sectionID, rowID) {
  let {
    categoryType,
  } = this.props;

  if(sectionID === 'resourceInfoList'){
      return this._renderResourceInfoListRow(rowData)
  }else if (sectionID === 'productList') {
    return (
        <ProductCell
            key={'row' + rowID}
            rowID={rowID}
            data={rowData}
            onPressProduct={this.props.onPressProduct}
            firstHaggle={this.props.firstHaggle}
            continueHaggle={this.props.continueHaggle}
            onStop = {this.props.onStop}
            categoryType={categoryType}
        />
    );
  }else {
    return null;
  }
}

  _changeCategory(index) {
    let {
        categoryType,
    } = this.props;

    if (index == categoryType) {
      return
    }

    this.props.onPressCategory && this.props.onPressCategory(index);
  }

  render() {
    let {
        data,
        categoryType,
        resourceInfo,
    } = this.props;

    let productList =  data.list ? data.list.toArray() : [];
    let color = categoryType == 0 ? '#444444' : '#b0b0b0';
    let subcolor = categoryType == 1 ? '#444444' : '#b0b0b0';
    let dataSource = null;
    if (categoryType == 0) {
        dataSource = {
            resourceInfoList: resourceInfo.resourceList ? resourceInfo.resourceList.toArray() : [],
            productList: data.list ? data.list.toArray() : [],
        }
    }else {
        dataSource = {
            productList: data.list ? data.list.toArray() : [],
        }
    }

    return (
      <View style={styles.container}>

          {
              Platform.OS === 'ios' ?
              <ListView
                ref={(c) => {
                    this.listView = c;
                }}
                enableEmptySections={true}
                enablePullToRefresh={true}
                contentContainerStyle={styles.contentContainer}
                dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                renderRow={this._renderRow}
                renderHeader={this._renderHeader}
                renderFooter={this._renderFooter}
                isOnPullToRefresh={data.isPullToRefresh}
                onEndReachedThreshold ={50}
                onRefreshData={() => {
                    this.props.onRefresh && this.props.onRefresh(categoryType);
                }}
                onEndReached={() => {
                    if (productList.size !== 0) {
                        this.props.onEndReached && this.props.onEndReached(categoryType);
                    }
                }}

                />
              :
              <ListView
                  ref={(c) => {
                      this.listView = c;
                  }}
                  enableEmptySections={true}
                  enablePullToRefresh={true}
                  contentContainerStyle={styles.contentContainer}
                  dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                  renderRow={this._renderRow}
                  renderHeader={this._renderHeader}
                  renderFooter={this._renderFooter}
                  isOnPullToRefresh={data.isPullToRefresh}
                  onEndReachedThreshold ={10}
                  onRefreshData={() => {
                      this.props.onRefresh && this.props.onRefresh(categoryType);
                  }}
                  refreshControl={
                          <YH_PtrRefresh
                              refreshing={data.isPullToRefresh}
                              onRefresh={() => {
                                  this.props.onRefresh && this.props.onRefresh(categoryType);
                              }}
                              colors={['#000000', '#ff0000']}
                              progressBackgroundColor="#ffffff"
                          />
                      }
              />
          }

          <View style={styles.bottomView}>
              <TouchableOpacity activeOpacity={1} style={styles.textItemStyle} onPress={() => {
                this._changeCategory && this._changeCategory(0);
              }}>
                  <Text style={[styles.textsStyle, {color: color}]}>砍价商品</Text>
              </TouchableOpacity>
              <View style={styles.separator}/>
              <TouchableOpacity activeOpacity={1} style={styles.textItemStyle} onPress={() => {
                this._changeCategory && this._changeCategory(1);
              }}>
                  <Text style={[styles.textsStyle, {color : subcolor}]}>我的砍价</Text>
              </TouchableOpacity>

          </View>

      </View>
    );
  }
}

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

let styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        topImageView: {
          width: width,
          height: 121 * DEVICE_WIDTH_RATIO,
        },

        contentContainer: {
            flexDirection: 'column',
            backgroundColor: 'white',
            paddingBottom: 50 * DEVICE_WIDTH_RATIO,
        },

        bottomView: {
          position: 'absolute',
          width: width,
          height: 50 * DEVICE_WIDTH_RATIO,
          bottom: 0,
          flexDirection: 'row',
          backgroundColor: 'white',
          borderTopColor: '#e0e0e0',
          borderTopWidth: 1,
        },

        textItemStyle: {
          width: width/2,
          height: 50 * DEVICE_WIDTH_RATIO,
          justifyContent:'center'
        },
        textsStyle: {
          fontFamily: 'PingFang-SC-Medium',
          fontSize: 16,
          textAlign:'center'
        },
        separator: {
            width:1,
            height: 50 * DEVICE_WIDTH_RATIO,
            backgroundColor: '#f0f0f0'
        },
        topLineSeparator: {
            width:width,
            height: 1,
            bottom: 55,
            backgroundColor: '#f0f0f0'
        },
    })
;