'use strict';

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


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


/**
 *   人气单品楼层,
 *   这个楼层是上边一个banner大图（数据是列表，但未处理列表逻辑），下边是滚动列表图
 **/
export default class PopularSingleProduct 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 data = this.props.data;
        let banner = data.get("banner_image");
        let bannerLength = banner.toJS().length;
        let index = parseInt(rowID)+bannerLength;

        let goodsImageUrl = rowData.get('default_images', '');
        goodsImageUrl = SlicedImage.getSlicedUrl(goodsImageUrl, goodsImageWidth, goodsImageHeight, 2);
        let goodsPrice = "¥" + parseFloat(rowData.get('sales_price', 0)).toFixed(2);
        let goodsLookNum = rowData.get('sales_num') + "人";

        let yh_exposureData = rowData.get('yh_exposureData') ? rowData.get('yh_exposureData').toJS() : null;


        return (
            <TouchableOpacity
                activeOpacity={1} yh_exposureData={yh_exposureData}
                onPress={() => this.props.onPressToProductDetail && this.props.onPressToProductDetail(rowData, goodsImageUrl, index)}
            >

                <View style={styles.goodsContainer}>
                    <YH_Image
                        style={styles.goodsImage}
                        masksToBounds={true}
                        radius={{'topLeft':'2','topRight':'2','bottomRight':'2','bottomLeft':'2'}}
                        url={goodsImageUrl}
                    />
                    <Text style={styles.goodsPrice} numberOfLines={1}>{goodsPrice}</Text>
                    <Text style={styles.goodsLookNum} numberOfLines={1}>{goodsLookNum}</Text>
                    <Text style={[styles.goodsLookNum, {marginTop: -5}]} numberOfLines={1}>正在浏览</Text>
                </View>

            </TouchableOpacity>
        );

    }


	render(){

        let data = this.props.data;
        let background =  data.get("background");
        let banner = data.get("banner_image");

		let title = data.get("title");
		let imglst = data.get("list", List());

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


		return(
			<View style={styles.container}>
				<HeadTitleCell title={title.get('title')} moreUrl={title.get('more_url')} 
                    onPressTitleMore={this.props.onPressTitleMore} yh_exposureData={yh_exposureDataTitle} />
                <ImageSlider
                    resource={banner}
                    sliderWidth={width}
                    sliderHeight={bannerHeight}
                    onPressSlideItem={this.props.onPressSlideItem}
                />
                <ListView
                    style={styles.listViewContainer}
                    dataSource={this.dataSource.cloneWithRows(imglst.toArray())}
                    horizontal={true}
                    renderRow={this.renderRow}
                    enableEmptySections={true}
                />
			</View>
        );
	}

};

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

let bannerHeight = Math.ceil(width * 234 / 750);
let goodsImageWidth = Math.ceil(90);
let goodsImageHeight = Math.ceil(120);
let containerHeight = 40 + bannerHeight + 192;


let styles = StyleSheet.create({

	container: {
        width: width,
        height: containerHeight,
        backgroundColor: 'white'
    },

    bannerImage: {
        width: width,
        height: bannerHeight,
    },

    listViewContainer: {
        width: width,
        height: 202,
        paddingTop: 12,
        paddingBottom: 12,
        backgroundColor: '#ffffff',
    },

    goodsContainer: {
        width: 90,
        height: 178,
        marginLeft: 11,
        // backgroundColor: '#f0f0f0',
    },

    goodsImage: {
        width: goodsImageWidth,
        height: goodsImageHeight,
        borderRadius: 2,
    },

    goodsPrice: {
        width: goodsImageWidth,
        height: 20,
        fontSize: 12,
        fontWeight: 'bold',
        color: '#444444',
        textAlign: 'center',
        marginTop: 5,
    },

    goodsLookNum: {
        width: goodsImageWidth,
        height: 15,
        fontSize: 9,
        fontWeight: 'bold',
        color: '#b0b0b0',
        textAlign: 'center',
    },

});