'use strict';

import React, {Component} from "react";
import {
    View,
    Image,
    StyleSheet,
} from "react-native";

import TabNavigator from "react-native-tab-navigator";

import HomeVC from "./Home/HomeVC";
import MineVC from "./Mine/MineVC";
import ForumVC from "./Forum/ForumVC";
import ExploreVC from "./Explore/ExploreVC";


const HomeTag = "首页";
const HomeIconNormal = require('../images/home_26x26_.png');
const HomeIconSelected = require('../images/homePress_26x26_.png');

const ForumTag = "论坛";
const ForumIconNormal = require('../images/forum.png');
const ForumIconSelected = require('../images/forum.png');


const ExploreTag = "发现";
const ExploreIconNormal = require('../images/explore_26x26_.png');
const ExploreIconSelected = require('../images/explore_26x26_.png');


const MineTag = "我的";
const MineIconNormal = require('../images/profile_26x26_.png');
const MineIconSelected = require('../images/profilePress_26x26_.png');


export default class App extends React.Component {

    //初始化状态
    constructor(props){
        super(props);
        this.state = {
            selectedTab: HomeTag
        }
    }

    //布局视图
    render () {
        return (
            //页面根视图
            <View style={styles.container}>

                {/* 添加导航栏*/}
                <TabNavigator style={styles.tabNav}>

                    {/* 添加首页标签*/}
                    {this._returnTabbarItems(HomeTag, HomeIconNormal, HomeIconSelected, HomeVC)}

                    {/* 添加论坛标签*/}
                    {this._returnTabbarItems(ForumTag, ForumIconNormal, ForumIconSelected, ForumVC)}

                    {/* 添加发现标签*/}
                    {this._returnTabbarItems(ExploreTag, ExploreIconNormal, ExploreIconSelected, ExploreVC)}

                    {/* 添加我的标签*/}
                    {this._returnTabbarItems(MineTag, MineIconNormal, MineIconSelected, MineVC)}

                </TabNavigator>

            </View>
        )
    }

    //创建标签选项
    _returnTabbarItems(selectedTab, icon, selectedIcon, Component) {
        return (
            <TabNavigator.Item
                title = {selectedTab}
                renderIcon = {() => <Image source={icon}/>}
                //renderSelectedIcon = {() => <Image source={selectedIcon}/>}
                selected = {this.state.selectedTab === selectedTab}
                onPress = {() => this.setState({selectedTab:selectedTab})}
            >
                <Component/>
            </TabNavigator.Item>
        )
    }
}


const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    tabNav: {
        //height:49,
        //backgroundColor:"green",
    },
});