'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    ListView,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
} from 'react-native';
import Immutable, {Map} from 'immutable';


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

/**
 *   六图并列楼层,
 *   这个楼层是六个图片，一行两个展示
 **/
export default class SixLinesFloor extends Component{


	constructor(props) {
	  super(props);
      this.dataSource = new ListView.DataSource({
          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
      });
      this.renderRow = this.renderRow.bind(this);

	}

    renderRow(rowData,sectionID,rowID,highlightRow){

        let goodsImageUrl = rowData.get('src');
        goodsImageUrl = SlicedImage.getSlicedUrl(goodsImageUrl, imageWidth, imageHeight, 2);

        return(
            <TouchableOpacity activeOpacity={1}
                onPress={() => this.props.onPressImageItem && this.props.onPressImageItem(rowData.get('url'), rowID)}>

                <YH_Image style={styles.goodsImage} url={goodsImageUrl}  />

            </TouchableOpacity>
        );
    }

	render(){

        let data = this.props.data;
		let title = data.get("title");
		let imglst = data.get("list");

        let lineNumber = Math.floor((imglst.size + 1)/2);
        let containerHeight = 40 + lineNumber * imageHeight;
		return(
			<View style={[styles.container, {height: containerHeight}]}>
				<HeadTitleCell title={title.get('name')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore}/>
                <ListView
                    contentContainerStyle={styles.listViewContainer}
                    dataSource={this.dataSource.cloneWithRows(imglst.toArray())}
                    renderRow={this.renderRow}/>
			</View>
        );
	}
};

let {width} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let imageWidth = Math.floor(width / 2);
let imageHeight = Math.floor(imageWidth * 180 / 375);


let styles = StyleSheet.create({
	container: {
        width: width,
    },

    listViewContainer: {
        width: width,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems:'flex-start',
    },

    goodsImage: {
        width: imageWidth,
        height: imageHeight,
    },


});