import React, { Component } from 'react'
import { View, Text, StyleSheet, Dimensions, TouchableOpacity, Platform } from 'react-native'
import PropTypes from 'prop-types'
import history from '../common/history'
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import DeviceInfo from 'react-native-device-info'
import { colors } from '../assets/styles/colors-theme';
import { Fonts } from '../assets/styles/fonts-theme';
import Icon from 'react-native-vector-icons/FontAwesome5'
const { width } = Dimensions.get('window')
import { inject, observer } from "mobx-react";
import { observable } from "mobx";
@inject("appStore")
@observer
export default class TabButton extends Component {
    constructor(props) {
        super(props);
        this.store = props.appStore;
      }

    langLabelReturn(){
      switch(this.props.label){
          case 'home':
            return this.store.text.home
          break;
          case 'info':
                return this.store.text.rentTools
          break;

          case 'history':
                return this.store.text.history
          break;
         
          case 'profile':
                return this.store.text.profile
          break;

          
      }
    }
    
  render() {
    const props = this.props;

    return (
        <View style={DeviceInfo.isTablet()?styles.TabletTabButton:styles.tabButtion}>
        <Icon
          focused={props.focused}
          size={24}
          name={props.iconName}
          color={props.focused ? colors.mainColor : colors.maingray}
        />
        <Text style={{ color: props.focused ? colors.mainColor : colors.maingray, marginTop:5  }}>
          {this.langLabelReturn(props.labelName)}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.flatten({
  naviBar: {
    width,
    height: Platform.OS === 'ios' ? 80 : 70, //ios原生导航高度是44，android是56
    backgroundColor: colors.mainColor,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  barAreaView: {
    flex: 1,
    justifyContent: 'center',
  },
  TabletTabButton:{
    justifyContent: "center", alignItems: "center",width:scale(24) 
  },
  tabButtion:{
    justifyContent: "center", alignItems: "center",marginTop:10
  },
})