/**
 * Description:
 * <p> new_user_floor：新人专享
 * Author:  Bruce.Lu
 * Version: 1.0
 * Created on 2017/2/9.
 */
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 Banner from '../../../common/components/Banner'

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

    onPressBanner() {
        console.log("banner on press");
    }

    _getImageUrl(rowId) {
        return {uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'};
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        let productName = '商品名称';
        let productPrice = '888.88';
        return (
            <View style={styles.row}>
                <Image style={styles.image}
                       source={this._getImageUrl(rowID)}
                       resizeMode={'cover'}/>
                <View style={styles.detailContainer}>
                    <Text style={styles.detail} numberOfLines={2}>{productName}</Text>
                    <Text style={styles.detail} numberOfLines={2}>{productPrice}</Text>
                    <TouchableOpacity style={styles.buyContainer} onPress={this.onPressBuy}>
                        <Text style={styles.buy} numberOfLines={1}>立即购买</Text>
                        <Image style={{width:4,height:7,marginLeft:2}}
                               source={require('../../images/ic_small_arrow_right.png')}/>
                    </TouchableOpacity>
                </View>
            </View>);
    }

    onPressBuy() {
        console.log('buy');
    }

    render() {
        let bannerData = Immutable.fromJS(
            [{
                "src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
                "title": "",
                "url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
            }
                ,
                {
                    "src": "http://img10.static.yhbimg.com/yhb-img01/2017/02/13/10/01d3b3208f7b4971396981debc758c7275.jpg?imageView2/{mode}/w/{width}/h/{height}",
                    "title": "",
                    "url": "https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html?title=超值精选&share_id=1637&openby:yohobuy={\"action\":\"go.h5\",\"params\":{\"param\":{\"share_id\":\"1637\",\"title\":\"超值精选\"},\"share\":\"/operations/api/v5/webshare/getShare\",\"shareparam\":{\"share_id\":\"1637\"},\"title\":\"超值精选\",\"url\":\"https://feature.yoho.cn/0116/0116SELECTITEMSBOY/index.html\"}}"
                }
            ]
        );
        let data = [1, 1, 1];
        return (
            <View style={styles.container}>
                <HeadTitleCell title={'新人专享'}/>
                <Banner
                    data={bannerData}
                    duration={8}
                    width={width}
                    height={bannerHeight}
                    onPress={this.onPressBanner}
                />


                <View style={styles.listContianer}>
                    <Image style={styles.listBg}
                           source={{uri: 'http://imgsrc.baidu.com/baike/pic/item/e61190ef76c6a7ef560572e1f8faaf51f2de66d2.jpg'}}
                           resizeMode={'cover'}/>
                    <View>
                        <ListView
                            contentContainerStyle={styles.list}
                            horizontal={true}
                            dataSource={this.dataSource.cloneWithRows(data)}
                            renderRow={this.renderRow}
                            showsHorizontalScrollIndicator={false}
                        />
                        <View style={{position:'absolute',left:0,top:5,alignItems:'center'}}>
                            <Image source={require('../../images/ic_newcomer_tips.png')}
                                   style={{width:18,height:90}}/>
                            <Text
                                style={{color:'white',fontSize:11,textAlignVertical:"center",height:90,position:'absolute',left:0,top:0}}>
                                新{'\n'}人{'\n'}专{'\n'}享{'\n'}
                            </Text>
                        </View>
                    </View>
                </View>

            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let bannerHeight = Math.ceil((234 / 750) * width);
let sectionHeight = Math.ceil((419 / 750) * width);
let cellWidth = 150;
let cellHeight = 100;

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flex: 1
    },
    listContianer: {
        height: 130,
        alignItems: 'center',
        paddingTop: 15,
        paddingBottom: 15,
    },
    listBg: {
        width: width,
        height: 130,
        position: 'absolute',
        top: 0,
        left: 0
    },
    list: {
        backgroundColor: 'white',
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        paddingHorizontal: 5,
        height: cellHeight
    },
    row: {
        flexDirection: 'row',
        height: cellHeight
    },
    detailContainer: {
        width: cellWidth / 2,
        height: cellHeight,
        flexDirection: 'column',
        alignItems: 'flex-start',
        padding: 4
    },
    detail: {
        fontSize: 11,
        textAlign: 'center',
        color: '#444444',
        marginTop: 12,
        width: cellWidth / 2
    },
    buyContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: cellWidth / 2,
        height: 20,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 15,
    },
    buy: {
        fontSize: 11,
        textAlign: 'center',
        color: '#b0b0b0',
    },
    image: {
        width: cellWidth / 2,
        height: cellHeight,
    },
    text: {
        width: cellWidth / 2,
        fontSize: 12,
        color: 'gray',
        textAlign: 'center',
    }
});