/**
 * 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 Swiper from 'react-native-swiper';
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._renderRow = this._renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        let title = rowData.get('title');
        let actionUrl = rowData.get('url');
        let imgUrl = SlicedImage.getSlicedUrl(rowData.get('src'),imageWidth,imageHeight,2);
        return (
            <TouchableOpacity style={styles.cellContainer}
                onPress={()=>this.props.onPressVipBannerItem&&this.props.onPressVipBannerItem(actionUrl,rowID)}>
                <YH_Image style={styles.image}
                       url={imgUrl}/>
                <Text style={styles.text}>{title}</Text>
            </TouchableOpacity>
        );
    }

    render() {
        let data = this.props.data;
        let title = data.get('title').get('title');
        let categoryData = data.get('list');
        let rowH = 40 + 2 + cellHeight * 3;
        return (
            <View style={{width:width,height:rowH}}>
                <HeadTitleCell title={title}/>
                <View style={styles.line}/>
                <ListView
                    contentContainerStyle={styles.listContent}
                    dataSource={this.dataSource.cloneWithRows(categoryData.toArray())}
                    renderRow={this._renderRow}
                    initialListSize={12}
                    showsHorizontalScrollIndicator={false}
                />
                <View style={styles.line}/>
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let cellWidth = width / 4-0.5;
let imageWidth = cellWidth - 14 * 2;
let imageHeight = imageWidth * 168 / 126;
let cellHeight = imageHeight + 20;

const styles = StyleSheet.create({
    line: {
        height: 0.5,
        backgroundColor: '#f7f7f7'
    },
    listContent: {
        backgroundColor: '#e5e5e5',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    cellContainer: {
        backgroundColor: '#f5f7f6',
        width:cellWidth,
        justifyContent:'center',
        alignItems:'center',
        marginRight:0.5,
        marginBottom:0.5
    },
    image: {
        width: imageWidth,
        height: imageHeight,
    },
    text: {
        backgroundColor: '#f5f7f6',
        fontSize: 12,
        color: '#444444',
        textAlign: 'center',
        width:cellWidth,
        height:20
    }
});