/**
 * Description:
 * hot_category_individualization：热门品类楼层 + title，大数据版
 * Author:  Bruce.Lu
 * Version: 1.0
 * Created on 2017/2/14.
 */
import React, {Component} from 'react';
import ReactNative, {
    Image,
    Text,
    StyleSheet,
    ListView,
    View,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
import ImmutablePropTypes from 'react-immutable-proptypes';
import Immutable from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';
import HeadTitleCell from '../cell/HeadTitleCell';
import YH_Image from '../../../common/components/YH_Image';

export default class HotCategoryIndividualization extends Component {
    constructor(props) {
        super(props);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    render() {
        let title = this.props.data.get('title');
        let data = this.props.data.get('list').toArray();
        let lineNumber = parseInt((data.length + 3) / 4);
        let listHeight = Math.floor(lineNumber * cellHeight);
        let containerHeight = listHeight + 40;

        let yh_exposureDataTitle = (title && title.get('yh_exposureData')) ? title.get('yh_exposureData').toJS() : null;

        return (
            <View style={[styles.container, {height: containerHeight}]}>
                <HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} 
                    onPressTitleMore={this.props.onPressTitleMore} yh_exposureData={yh_exposureDataTitle}/>
                <View style={[styles.list, {height: listHeight}]}>
                    {data.map((item, i) => {
                        let url = YH_Image.getSlicedUrl(item.get('src'), imageWidth, imageHeight, 2);
                        let yh_exposureData = item.get('yh_exposureData') ? item.get('yh_exposureData').toJS() : null;

                        return (
                            <TouchableOpacity
                                key={i}
                                style={styles.cellContainer}
                                activeOpacity={1}
                                yh_exposureData={yh_exposureData}
                                onPress={() => {
                                    this.props.onPressVipBannerItem && this.props.onPressVipBannerItem(item.get('url'), url, i + 1);
                                }}>
                                <YH_Image url={url} style={styles.image} />
                                <Text style={styles.text}>{item.get('title')}</Text>
                            </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');
let cellWidth = width / 4;
let imageWidth = cellWidth;
let imageHeight = Math.floor(imageWidth * 249 / 187);
let cellHeight = imageHeight;

const styles = StyleSheet.create({
    container: {
        width: width,
        flexDirection: 'column',
    },
    list: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        width:width,
    },
    cellContainer: {
        backgroundColor: '#f5f7f6',
        width:cellWidth,
        height:cellHeight,
        alignItems:'center',
        flexDirection:'column'
    },
    image: {
        width: imageWidth,
        height: imageHeight,
    },
    text: {
        backgroundColor: '#ffffff99',
        fontSize: 12,
        color: '#444444',
        textAlign: 'center',
        width:cellWidth,
        height:20,
        position:'absolute',
        top:imageHeight-20,
        left:0,
    },
    vLine1: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        top: 0,
        left: cellWidth,
    },
    vLine2: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        top: 0,
        left: cellWidth * 2,
    },
    vLine3: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width: 0.5,
        top: 0,
        left: cellWidth * 3,
    },
    hLine1: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width,
        height: 0.5,
        top: cellHeight,
        left: 0,
    },
    hLine2: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width,
        height: 0.5,
        top: cellHeight * 2,
        left: 0,
    },
});