'use strict';

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

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


export default class AppHotBrands extends React.Component {
    constructor(props) {
        super(props);
    }

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

    render() {
        let {title, image, list} = this.props.data.toObject();

        let lineNumber = parseInt((list.size + 3) / 4);
        if (list.size % 4 == 0) {
            lineNumber += 1;
        }
        let listHeight = Math.ceil(lineNumber * imageHeight);
        let containerHeight = 40 + listHeight;

        let moreUrl = YH_Image.getSlicedUrl(image.get('src'), width, imageHeight, 2);

		return (
			<View style={[styles.container, {height: containerHeight}]}>
                <HeadTitleCell title={title.get('title')} />
                <View style={[styles.listContainer, {height: listHeight}]}>
                    {list.map((item, i) => {
                        let url = YH_Image.getSlicedUrl(item.get('src'), width, imageHeight, 2);

                        return (
                            <TouchableOpacity key={i} activeOpacity={1} style={styles.commonImage} onPress={() => {
                                this.props.onPressHotBrandItem && this.props.onPressHotBrandItem(item.get('url'), i);
                            }}>
                                <YH_Image url={url} style={styles.commonImage}/>
                            </TouchableOpacity>
                        )
                    })}

                    <TouchableOpacity style={styles.lastImage} activeOpacity={1} onPress={() => {
                        this.props.onPressHotBrandItem && this.props.onPressHotBrandItem(image.get('url'), list.length - 1);
                    }}>
                        <YH_Image url={moreUrl} style={styles.lastImage}/>
                    </TouchableOpacity>

                    <View style={styles.hLine1} />
                    <View style={styles.vLine1} />
                    <View style={styles.vLine2} />
                    <View style={styles.vLine3} />
                </View>
            </View>
		);
    }
};


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

const DEVICE_WIDTH_RATIO = width / 320;

let cellWidth = width/4.0-0.1;

let imageWidth = width / 4;
let imageHeight = Math.floor(87 * DEVICE_WIDTH_RATIO);

let styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        width: width,
    },
    listContainer: {
        backgroundColor: 'white',
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: width,
    },
    commonImage: {
        width: imageWidth,
        height: imageHeight,
    },
    lastImage: {
        width: imageWidth * 2,
        height: imageHeight,
    },
    vLine1: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        height: imageHeight * 2,
        top: 0,
        left: imageWidth,
    },
    vLine2: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        height: imageHeight * 2,
        top: 0,
        left: imageWidth * 2,
    },
    vLine3: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        height: imageHeight,
        top: 0,
        left: imageWidth * 3,
    },
    hLine1: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width,
        height: 0.5,
        top: imageHeight,
        left: 0,
    },
});