'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 RecommendContentOne 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, big_image, list} = this.props.data.toObject();

        let left = list.get(0);
        let leftUrl = YH_Image.getSlicedUrl(left.get('src'), width, listHeight, 2);
        let right = list.delete(0).toArray();
        let yh_exposureData_more = title.get('yh_exposureData')?title.get('yh_exposureData').toJS():null;
        let yh_exposureData_left = left.get('yh_exposureData')?left.get('yh_exposureData').toJS():null;

        return (
            <View style={styles.container}>
                <HeadTitleCell yh_exposureData={yh_exposureData_more} title={title.get('title')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore} />
                <ImageSlider
                    resource={big_image}
                    sliderWidth={width}
                    sliderHeight={bannerHeight}
                    onPressSlideItem={this.props.onPressRecommendListItem}
                />
                <View style={styles.list}>
                    <TouchableOpacity
                        style={styles.large}
                        yh_exposureData={yh_exposureData_left}
                        activeOpacity={1}
                        onPress={() => {
                            this.props.onPressRecommendListItem && this.props.onPressRecommendListItem(left.get('url'), leftUrl ,1);
                        }}
                    >
                        <YH_Image url={leftUrl} style={styles.large} />
                    </TouchableOpacity>

                    <View style={styles.right}>
                        {right.map((item, i) => {
                            let imageUrl = YH_Image.getSlicedUrl(item.get('src'), width, listHeight, 2);
                            let yh_exposureDatas = item.get('yh_exposureData')?item.get('yh_exposureData').toJS():null;
                            return (
                                <TouchableOpacity
                                    key={i}
                                    yh_exposureData={yh_exposureDatas}
                                    style={styles.small}
                                    activeOpacity={1}
                                    onPress={() => {
                                        this.props.onPressRecommendListItem && this.props.onPressRecommendListItem(item.get('url'), imageUrl, i + 2);
                                    }}
                                >
                                    <YH_Image url={imageUrl} style={styles.small} />
                                </TouchableOpacity>
                            );
                        })}
                        <View style={styles.vLine1} />
                        <View style={styles.vLine2} />
                        <View style={styles.hLine1} />
                    </View>
                </View>

            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;

let bannerHeight = Math.ceil(200 * DEVICE_WIDTH_RATIO);
let listHeight = Math.ceil(190 * DEVICE_WIDTH_RATIO);
let containerHeight = 40 + bannerHeight + listHeight;

let largeImageWidth = Math.floor(129 * DEVICE_WIDTH_RATIO);
let smallImageWidth = Math.floor((width - largeImageWidth) / 2);

let styles = StyleSheet.create({
    container: {
        width: width,
        height: containerHeight,
        flexDirection: 'column',
    },
    list: {
        flexDirection: 'row',
        width,
        height: listHeight,
    },
    right: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: Math.ceil(width - largeImageWidth),
        height: listHeight,
    },
    large: {
        width: largeImageWidth,
        height: listHeight,
    },
    small: {
        width: smallImageWidth,
        height: Math.ceil(listHeight / 2),
    },
    vLine1: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        height: listHeight,
        top: 0,
        left: 0,
    },
    vLine2: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        height: listHeight,
        top: 0,
        left: smallImageWidth,
    },
    hLine1: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: smallImageWidth * 2,
        height: 0.5,
        top: smallImageWidth,
        left: 0,
    },
});