'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    Button,
    ListView,
    StyleSheet,
    Dimensions,
    ScrollView,
    TouchableOpacity,
    Platform,
    InteractionManager,
} from 'react-native';


export default class Magazine 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) {
        if(rowID == 0){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine1.png')} />
            );
        }
        else if(rowID == 1){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine2.png')} />
            );
        }
        else if(rowID == 2){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine3.png')} />
            );
        }
        else if(rowID == 3){
            return (
                <Image style={styles.magazineImage} source={require('../../images/magazine1.png')} />
            );
        }
        else
            return null;
    }


    render() {

        let content = "《YOHO!潮流志》、《YOHO!GIRL》是年轻人的潮流宝典，不仅网罗了方方面面的潮流讯息，"+
                      "亦会让你对话潮流明星和各大潮牌主理人，轻松掌握当季新品内容及背后故事，手把手教你如何变身潮人。";

        let magazineData = [1,1,1];

        return (
            <ScrollView style={styles.container}>

                <View style={styles.magazineContainer}>
                    <Text style={styles.magazineDesc}>{content}</Text>
                </View>

                <Text style={styles.about}>ABOUT</Text>

                <ListView
                    style={styles.magazineList}
                    dataSource={this.dataSource.cloneWithRows(magazineData)}
                    horizontal={true}
                    renderRow={this.renderRow}
                />


                <Text style={styles.yohoNowText1}>{"点击或扫描二维码YOHO!NOW APP"}</Text>

                <TouchableOpacity style={styles.yohoNowImageContainer} activeOpacity={1} onPress={() => {
                    this.props.onPressYohoNow && this.props.onPressYohoNow();}}>
                    <Image style={styles.yohoNowImage} source={require('../../images/yohonow.png')} />
                </TouchableOpacity>

                
            </ScrollView>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },

    magazineContainer: {
        width: width - 60,
        height: 350,
        backgroundColor: 'white',
        marginTop: 40,
        marginLeft: 30,
        marginRight: 30,
        marginBottom: 40,
    },

    about:{
        position: 'absolute',
        top: 10,
        left: 50,        
        fontSize: 35,
        color: 'rgb(212,169,68)',  
        fontWeight: 'bold',
    },

    magazineDesc:{
        fontSize: 15,
        color: 'rgb(33,33,33)',  
        fontWeight: 'bold',
        marginTop: 20,
        marginLeft: 12,
        marginRight: 12,
    },

    magazineList:{
        position: 'absolute',
        top: 170,
        left: 10,
        width: width - 20,
    },

    magazineImage:{
        width: 106,
        height: 190,
        marginLeft: 3,
        marginRight: 3,
    },  

    yohoNowText1:{
        position: 'absolute',
        top: 380,
        width: width - 20,
    },

    yohoNowImageContainer:{
        position: 'absolute',
        top: 400,
        height: 125,
    }, 

    yohoNowImage:{
        width: 125,
        height: 125,
    },  

});