import React from 'react';
import {
  SafeAreaView,
  Text,
  View,
  TouchableOpacity,
  Image,
  TextInput,
  Keyboard,
} from 'react-native';
import { inject, observer } from 'mobx-react';
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 { observable } from 'mobx';
import { colors } from './src/assets/styles/colors-theme';

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 = 'storefront';
              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={28}
                color={isFocused ? 'white' : '#98AD86'}
              />
              <Text style={{ color: isFocused ? 'white' : '#98AD86', fontSize: 12 }}>
                {this.langLabelReturn(label)}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}))
export default MyTabBar