/**
 * Description:
 * <p> kids_brands：热门品牌推荐 潮童
 * Author:  Bruce.Lu
 * Version: 1.0
 * Created on 2017/2/9.
 */

'use strict'
import React, {
    Component
} from 'react';
import ReactNative, {
    Text,
    ListView,
    Image,
    View,
    StyleSheet,
    Dimensions,
    TouchableOpacity
} from 'react-native';

import Immutable, {
    Map
} from 'immutable';

import HeadTitleCell from '../cell/HeadTitleCell';
import YH_Image from '../../../common/components/YH_Image';
import SlicedImage from '../../../common/components/SlicedImage';

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

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

    _renderRow(rowData, sectionID, rowID, highlightRow) {
        let moreUrl = this.props.data.get('title').get('more_url');
        let imgUrl = SlicedImage.getSlicedUrl(rowData.get('src'), itemWidth, itemWidth, 2);
        let title = rowData.get('title');
        let actionUrl = rowData.get('url');
        if (rowID <= 7) {
            if (rowID == 7) {
                return (
                    <TouchableOpacity
                        onPress={()=>{this.props.onPressBrandItem&&this.props.onPressBrandItem(moreUrl, '', rowID)}}
                        yh_exposureData={this.props.data.get('title').get('yh_exposureData')}>
                        <View style={styles.row}>
                            <View style={styles.imageContainer}>
                                <Image
                                    source={require('../../images/brandicon_more.png')}/>
                            </View>
                            <Text style={styles.text} numberOfLines={1}>
                                MORE
                            </Text>
                        </View>
                    </TouchableOpacity>
                );
            } else {
                return (
                    <TouchableOpacity style={styles.cellContainer}
                                      activeOpacity={1}
                                      yh_exposureData={rowData.get('yh_exposureData')}
                                      onPress={()=>{this.props.onPressBrandItem&&this.props.onPressBrandItem(actionUrl, imgUrl, rowID)}}>
                        <YH_Image style={styles.image}
                                  url={imgUrl}/>
                        <Text style={styles.text} numberOfLines={1}>
                            {title}
                        </Text>
                    </TouchableOpacity>
                );
            }
        } else {
            return null;
        }
    }

    render() {
        let data = this.props.data;
        let title = data.get('title').get('title');
        let moreurl = data.get('title').get('more_url');
        let dataList = data.get('list');
        let floorH = 40 + itemHeight * 2 + 0.5;
        return (
            <View style={{backgroundColor:'white',width:width,height:floorH}}>
                <HeadTitleCell title={title} moreUrl={moreurl}
                    onPressTitleMore={this.props.onPressTitleMore} yh_exposureData={data.get('title').get('yh_exposureData')}/>
                <ListView
                    contentContainerStyle={styles.list}
                    dataSource={this.dataSource.cloneWithRows(dataList.toArray())}
                    initialListSize={data.length}
                    renderRow={this._renderRow.bind(this)}
                />
            </View>
        );
    }
}


let {width, height} = Dimensions.get('window');
let itemWidth = width / 4 - 0.5;
let itemHeight = itemWidth + 20;
let styles = StyleSheet.create({
    list: {
        backgroundColor: '#7f808080',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },
    cell: {
        marginLeft: 0,
        width: itemWidth,
        height: itemWidth + 20,
        backgroundColor: 'white',
        flexDirection: 'column'
    },
    image: {
        width: itemWidth,
        height: itemWidth,
    },
    text: {
        width: itemWidth,
        height: 20,
        backgroundColor: 'white',
        color: 'gray',
        textAlign: 'center',
        fontSize: 12,
    },
    imageContainer: {
        width: itemWidth,
        height: itemWidth,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center'
    },
    cellContainer: {
        backgroundColor: 'white',
        width: itemWidth,
        justifyContent: 'center',
        alignItems: 'center',
        marginRight: 0.5,
        marginBottom: 0.5
    },
});