import React, {Component} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Map from '../Map';
import Study from '../Study';
import Mine from '../Mine';
class Navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {selectedTab: '地图'};
  }

  render() {
    return (
      <TabNavigator
        tabBarStyle={{
          height: 'auto',
          borderStyle: 'solid',
          backgroundColor: '#CE9561',
          paddingBottom: 0,
        }}>
        <TabNavigator.Item
          selected={this.state.selectedTab === '地图'}
          title="地图"
          titleStyle={styles.tabText}
          selectedTitleStyle={styles.selectedTabText}
          renderIcon={() => (
            <Image
              style={styles.icon}
              source={require('../../images/Navigation/map.png')}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={styles.icon}
              source={require('../../images/Navigation/sel_map.png')}
            />
          )}
          onPress={() => {
            this.setState({selectedTab: '地图'});
            this.props.changeName('地图');
          }}>
          <Map />
        </TabNavigator.Item>

        <TabNavigator.Item
          selected={this.state.selectedTab === '自习'}
          title="自习"
          titleStyle={styles.tabText}
          selectedTitleStyle={styles.selectedTabText}
          renderIcon={() => (
            <Image
              style={styles.icon}
              source={require('../../images/Navigation/study.png')}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={styles.icon}
              source={require('../../images/Navigation/sel_study.png')}
            />
          )}
          onPress={() => {
            this.setState({selectedTab: '自习'});
            this.props.changeName('自习');
          }}>
          <Study navi={this.props.navi} />
        </TabNavigator.Item>

        <TabNavigator.Item
          selected={this.state.selectedTab === '我'}
          title="我"
          titleStyle={styles.tabText}
          selectedTitleStyle={styles.selectedTabText}
          renderIcon={() => (
            <Image
              style={styles.icon}
              source={require('../../images/Navigation/mine.png')}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={styles.icon}
              source={require('../../images/Navigation/sel_mine.png')}
            />
          )}
          onPress={() => {
            this.setState({selectedTab: '我'});
            this.props.changeName('我');
          }}>
          <Mine changeName={this.props.changeName} />
        </TabNavigator.Item>
      </TabNavigator>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F2E2CE',
    //opacity: 0.5,
    flex: 1,
  },
  icon: {
    height: 30,
    width: 40,
  },
  tabText: {
    fontSize: 15,
    color: '#9f5022',
    // fontWeight: 'bold',
    textAlign: 'center',
  },
  selectedTabText: {
    fontSize: 15,
    color: '#592202',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default Navigation;