'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';

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


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

    shouldComponentUpdate(nextProps){
        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }
    _renderRow(rowData, sectionID, rowID) {
        let {url,id} = rowData;
        if ((rowID+1)%4 == 0) {
            return (
                <TouchableOpacity style={styles.lastCell} onPress={()=>{this.props.onPressBrand&&this.props.onPressBrand(url,rowID,id)}}>
                    <Image style={styles.cellImg} source={{uri:rowData.thumb}}/>
                    <Text style={styles.cellTitle}>{rowData.name}</Text>
                </TouchableOpacity>
            );
        } else {
            return (
                <TouchableOpacity style={styles.cell} onPress={()=>{this.props.onPressBrand&&this.props.onPressBrand(url,rowID,id)}}>
                    <Image style={styles.cellImg} source={{uri:rowData.thumb}}/>
                    <Text style={styles.cellTitle}>{rowData.name}</Text>
                </TouchableOpacity>
            );
        }
    }

    render() {
        let {data} = this.props.resource.toJS();
        if (!data.length) {
            return (<View style={{height:1,width:width,backgroundColor:'white'}}/>);
        }
		return(
			<View style={styles.container}>
                <View style={styles.headerView}>
                    <Text style={styles.headerText}>相关品牌</Text>
                </View>
                <ListView
                    contentContainerStyle={styles.brandContainer}
                    enableEmptySections={true}
                    initialListSize={data.length}
                    dataSource={this.dataSource.cloneWithRows(data)}
                    renderRow={this._renderRow}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
            </View>
		);
    }
};


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

let styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f0f0',
    },
    headerView: {
        backgroundColor: 'white',
        marginTop: 15,
        height: 44,
    },
    headerText: {
        backgroundColor: 'white',
        fontSize: 18,
        color: 'black',
        textAlign: 'center',
        paddingTop: 13,
        flex: 1,
    },
    brandContainer: {
        backgroundColor: 'white',
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: width,
        paddingBottom: 15,
    },
    cell: {
        width: cellWidth,
        height: 75,
        backgroundColor: 'white',
        marginTop: 15,
        flexDirection: 'column',
        justifyContent: 'space-between',
    },
    lastCell: {
        width: cellWidth,
        height: 75,
        backgroundColor: 'white',
        marginTop: 15,
        flexDirection: 'column',
        justifyContent: 'space-between',
    },
    cellImg: {
        backgroundColor: 'white',
        marginLeft: (cellWidth-55)/2,
        width: 55,
        height: 55,
    },
    cellTitle: {
        backgroundColor: 'white',
        fontSize: 11,
        color: 'rgb(215, 215, 215)',
        textAlign: 'center',
        marginLeft: 0,
        marginRight: 0,
    }

});