'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 AppIconList extends React.Component {
    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);
        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) {
        let {url, src, title} = rowData.toJS();
        src = src.replace('{width}', 84).replace('{height}', 84).replace('{mode}',2);
        title = title&&title.length?title:'';
        let cellStyle = styles.cell;
        let imgStyle = styles.cellImg;
        if (this.props.number == '4') {
            cellStyle = styles.cell4;
            imgStyle = styles.cellImg4;
        }
        return (
            <TouchableOpacity style={cellStyle} onPress={()=>{this.props.onPressAppIconItem && this.props.onPressAppIconItem(url, rowID)}}>
                <Image style={imgStyle} source={{uri:src}} resizeMode={'contain'}/>
                <Text style={styles.cellTitle}>{title}</Text>
            </TouchableOpacity>
        );
    }

    render() {
        let data = this.props.data.toArray()
        if (!data.length) {
            return null;
        }
        let count = parseInt(this.props.number);
        let tail = (data.length%count != 0) ? 1 : 0;
        let lineNumber = data.length/count + tail;

        let padding = count == 4 ? padding4 : padding5;
        let containerHeight = (count == 4 ? 84 : 75) * lineNumber +  padding * (lineNumber - 1) + 12*width/320 + 19;

        let listContainerStyle = styles.brandContainer;
        if (this.props.number == '4') {
            listContainerStyle = styles.brandContainer4
        }
		return(
			<Image style={[styles.container, {height: containerHeight}]} source={{uri:this.props.backImage}}>
                <ListView
                    contentContainerStyle={listContainerStyle}
                    enableEmptySections={true}
                    initialListSize={data.length}
                    dataSource={this.dataSource.cloneWithRows(data)}
                    renderRow={this._renderRow}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
            </Image>
		);
		return null;
    }
};


let {width, height} = Dimensions.get('window');
let padding5 = (width - 42*5)/12;
let padding4 = (width - 51*4)/10;

let styles = StyleSheet.create({
    container: {
        backgroundColor: '#f0f0f0',
    },
    brandContainer: {
        backgroundColor: 'white',
        borderColor: 'rgb(215, 215, 215)',
        borderBottomWidth: 0.5,
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: width,
        paddingBottom: 19,
        paddingLeft: padding5,
        paddingRight: padding5-1,
    },
    cell: {
        width: 42 + padding5*2,
        height: 75,
        marginTop: 0,
        marginBottom: 5,
        backgroundColor: 'white',
        flexDirection: 'column',
    },

    cellImg: {
        backgroundColor: 'white',
        marginLeft: padding5,
        marginTop: 12*width/320,
        width: 42,
        height: 42,
    },
    cellTitle: {
        backgroundColor: 'white',
        fontSize: 11,
        color: '#444444',
        textAlign: 'center',
        marginTop: 6*width/320,
        marginLeft: 0,
        marginRight: 0,
    },

    brandContainer4: {
        backgroundColor: 'white',
        borderColor: 'rgb(215, 215, 215)',
        borderBottomWidth: 0.5,
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: width,
        paddingBottom: 19,
        paddingLeft: padding4,
        paddingRight: padding4-1,
    },
    cell4: {
        width: 51 + padding4*2,
        height: 84,
        marginTop: 0,
        marginBottom: 5,
        backgroundColor: 'white',
        flexDirection: 'column',
    },

    cellImg4: {
        backgroundColor: 'white',
        marginLeft: padding4,
        marginTop: 12*width/320,
        width: 51,
        height: 51,
    },

});