'use strict';

import React from 'react';
import ReactNative from 'react-native';
import {getSlicedUrl} from '../../utils/Utils';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';
import DeviceInfo from 'react-native-device-info';

const {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  Dimensions,
  TouchableOpacity,
  PixelRatio,
  Platform,
} = ReactNative;

export default class BannerReourceList extends React.Component {
    constructor(props) {
      super(props);
      this.dataSource = new ListView.DataSource({
          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
      });
    }

    shouldComponentUpdate(nextProps){

        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

    renderRow(rowData,sectionID,rowID,highlightRow) {

        let newSrc = getSlicedUrl(rowData.src, 140, 100, 2);
        let needYH_Image = false;

        if (Platform.OS === 'ios') {
 			let systemVersion = DeviceInfo.getSystemVersion();
 			systemVersion = parseFloat(systemVersion);
 			if (systemVersion < 8.0) {
 				needYH_Image = true;
 			}
 		}

        return (
            <TouchableOpacity activeOpacity={0.5} onPress={() => {
				this.props.onPressSlideItem && this.props.onPressSlideItem(rowData, rowID);
			}}>
                <View style={styles.thumbnailV}>
                    {needYH_Image?<YH_Image
                      url={newSrc}
                      style={styles.thumbnail}
                    />:<Image
                        source={{uri: newSrc}}
                        style={styles.thumbnail}
                        resizeMode={'contain'}
                      ></Image>}

                <View style={styles.textV}>
                      <Text style={styles.text}  numberOfLines={1}>
                          {rowData.name}
                      </Text>
                  </View>
                </View>
            </TouchableOpacity>
        );
    }

    render() {
		let {resource} = this.props;
        let custom_brands = resource.get('custom_brands');
        let res = custom_brands.toJS();


		let data = res.data;
        let title = data?data.title:null;
		let list = data?data.list:null;

        if (!custom_brands || custom_brands.size == 0 || !list) {
			return null;
		}

        return (
            <View style={styles.cellList}>
                <ListView
                    dataSource={this.dataSource.cloneWithRows(list)}
                    horizontal={true}
                    renderRow={this.renderRow.bind(this)}
                />
            </View>
        );
    }
};


let {width, height} = Dimensions.get('window');
let itemWidth= Math.ceil(width/4);
let itemHeight = itemWidth - 10;

let styles = StyleSheet.create({
    cellList:{
        justifyContent: 'center',
        width: Dimensions.get('window').width,
        height: itemHeight+20,
		backgroundColor: 'white',
    },
    titleStyle:{
		alignItems: 'center',
		justifyContent: 'center',
		height: 48,
		width:Dimensions.get('window').width,
        backgroundColor: 'white',
    },
     textV: {
         position: 'absolute',
         top: itemHeight - 20,
         width: itemWidth,
         alignItems: 'center',
         height: 20,
         backgroundColor:'white',
     },
    text: {
        color: 'gray',
        width: itemWidth,
        textAlign: 'center',
        justifyContent: 'center',
        fontSize: 11,
        backgroundColor:'white',
    },
    titleText: {
        textAlign: 'center',
        fontSize: 16,
        fontWeight: 'bold',
    },
    thumbnailV: {
        marginLeft: 10,
		width: itemWidth,
		height: itemHeight,
        backgroundColor: 'white',
	},
    thumbnail: {
		width: itemWidth,
		height: itemHeight,
        backgroundColor: 'white',
	},
    container: {
        width: width,
        height: 15,
        backgroundColor:'#f0f0f0',
    },
    containerView: {
        width: width,
        height: 32,
        backgroundColor:'white',
    }
});