'use strict';

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

const {
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Platform,
} = ReactNative;


export default class RecommendContentThree extends React.Component {

    constructor(props) {
        super (props);

    }

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

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

        let data = list.toArray();
        let lineNumber = parseInt((data.length + 3) / 4);
        let listHeight = Math.floor(lineNumber * imageHeight);

        return (
            <View style={styles.container}>
                <ImageSlider
                    resource={big_image}
                    sliderWidth={width}
                    sliderHeight={bannerHeight}
                    onPressSlideItem={this.props.onPressRecommendSlideItem}
                />
                <View style={[styles.list, {height: listHeight}]}>
                    {data.map((item, i) => {
                        let url = YH_Image.getSlicedUrl(item.get('src'), imageWidth, imageHeight, 2);
                        return (
                            <TouchableOpacity
                                key={i}
                                style={styles.image}
                                activeOpacity={1}
                                onPress={() => {
                                    this.props.onPressRecommendListItem && this.props.onPressRecommendListItem(item.get('url'), i + 1);
                                }}
                            >
                                <YH_Image url={url} style={styles.image} />
                            </TouchableOpacity>
                        );
                    })}
                    <View style={[styles.vLine1, {height: listHeight}]} />
                    <View style={[styles.vLine2, {height: listHeight}]} />
                    <View style={[styles.vLine3, {height: listHeight}]} />
                    <View style={styles.hLine1} />
                    <View style={styles.hLine2} />
                </View>
                
            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;

let bannerHeight = Math.ceil(100 * DEVICE_WIDTH_RATIO);


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

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