'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../../common/components/YH_Image';

const {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  Dimensions,
  Platform,
  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.data, this.props.data)
            && nextProps.backImage == this.props.backImage
            && nextProps.number == this.props.number) {
            return false;
        } else {
            return true;
        }
    }
    _renderRow(rowData, sectionID, rowID) {
        let {url, src, title,yh_exposureData} = 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;
        let titleStyle = styles.cellTitle;
        if (this.props.number == '4') {
            cellStyle = styles.cell4;
            imgStyle = styles.cellImg4;
            titleStyle = styles.cellTitle4;
        }

        return (
            <TouchableOpacity
                activeOpacity={1}
                style={cellStyle}
                yh_exposureData={yh_exposureData}
                onPress={()=>{this.props.onPressAppIconItem && this.props.onPressAppIconItem(url, src, rowID)}}
            >
                <YH_Image key={src} style={imgStyle} url={src} />
                <Text style={titleStyle}>{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;

        let listContainerStyle = styles.brandContainer;
        if (this.props.number == '4') {
            listContainerStyle = styles.brandContainer4
        }
		return(
			<YH_Image style={[styles.container, {height: containerHeight}]} url={this.props.backImage}>
                <ListView
                    contentContainerStyle={listContainerStyle}
                    enableEmptySections={true}
                    initialListSize={data.length}
                    dataSource={this.dataSource.cloneWithRows(data)}
                    renderRow={this._renderRow}
                    scrollEnabled={false}
                    scrollsToTop={false}
                />
            </YH_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: 'white',
    },
    brandContainer: {
        backgroundColor: 'white',
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: width,
        paddingBottom: 19,
        paddingLeft: padding5,
        paddingRight: padding5-1,
    },
    cell: {
        width: 42 + padding5*2,
        height: (Platform.OS === 'ios') ? 75 : 80,
        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',
        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,
    },

    cellTitle4: {
        backgroundColor: 'white',
        fontSize: 11,
        fontWeight:  'bold',
        color: '#444444',
        textAlign: 'center',
        marginTop: 6*width/320,
        marginLeft: 0,
        marginRight: 0,
    },

});