import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import Toast, {DURATION} from 'react-native-easy-toast';
import Icon from 'react-native-vector-icons/dist/MaterialCommunityIcons';
import {colors} from './src/assets/styles/colors-theme';
import { inject, observer } from "mobx-react"
import { observable, makeObservable } from 'mobx'
Icon.loadFont();
const MyTabBar = inject("appStore")(observer(class MyTabBar extends React.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;

        
    }
  }

  langLabelReturn(label){
    switch(label){
        case 'main':
          return this.store.text.main
        break;
        case 'myfavourite':
              return this.store.text.myfavourite
        break;

        case 'shoppingHistory':
              return this.store.text.shoppingHistory
        break;
       
        case 'acAndSetting':
              return this.store.text.acAndSetting
        break;

        
    }
  }

  render() {
    var {state, descriptors, navigation, logined} = this.props;
    return (
      <View style={{flexDirection: 'row', backgroundColor: colors.mainColor}}>
        {state.routes.map((route, index) => {
          const {options} = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;
          let iconName;
          switch (route.name) {
            case 'Main':
              iconName = 'home-variant';
              break;
            case 'BuyHistory':
              iconName = 'cart';
              break;
            case 'Favorite':
              iconName = 'heart';
              break;
            case 'Profile':
              iconName = 'account-circle';
              break;
          }

          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              console.log(route.name);
              if (route.name == 'Profile' && !this.store.logined) {
                navigation.navigate('Signin');
              } else if (route.name == 'Favorite' && !this.store.logined) {
                navigation.navigate('Signin');
              } else if (route.name == 'BuyHistory' && !this.store.logined) {
                navigation.navigate('Signin');
              } else {
                navigation.navigate(route.name);
              }
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          return (
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityStates={isFocused ? ['selected'] : []}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: 5,
                marginBottom: 5,
              }}>
              <Icon
                name={iconName}
                size={25}
                color={isFocused ? 'white' : '#C5DC77'}
              />
              <Text style={{color: isFocused ? 'white' : '#C5DC77', fontSize: 12}}>
                {this.langLabelReturn(label)}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}))
export default MyTabBar