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';
import I18n from './src/services/i18n'
import { images } from './src/assets/images/imageIndex'
Icon.loadFont();


const MyTabBar = inject("appStore")(observer(class MyTabBar extends React.Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }


  langLabelReturn(label) {
    switch (label) {
      case 'main':
        return 'main'
        break;
      case 'coupon':
        return 'cartCoupon'
        break;

      case 'menu':
        return 'menu'
        break;

      case 'setting':
        return 'settingsTitle'
        break;

    }
  }

  iconHandler(name, active) {
    if (active) {
      switch (name) {
        case 'main':
          return images.bottomBar.home
          break;
        case 'coupon':
          return images.bottomBar.coupon
          break;

        case 'menu':
          return images.bottomBar.menu
          break;

        case 'setting':
          return images.bottomBar.setting
          break;
      }
    } else {
      switch (name) {
        case 'main':
          return images.bottomBar.home_active
          break;
        case 'coupon':
          return images.bottomBar.coupon_active
          break;

        case 'menu':
          return images.bottomBar.menu_active
          break;

        case 'setting':
          return images.bottomBar.setting_active
          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 (label) {
            case 'main':
              iconName = images.bottomBar.home;
              break;
            case 'coupon':
              iconName = images.bottomBar.coupon;
              break;
            case 'menu':
              iconName = images.bottomBar.menu;
              break;
            case 'setting':
              iconName = images.bottomBar.setting;
              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 == 'Coupon' && !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: 10,
                marginBottom: 15,
              }}>
              {/* <Icon
                name={iconName}
                size={28}
                color={isFocused ? colors.fontColor : '#98AD86'}
              /> */}
            
              <Image source={this.iconHandler(label,isFocused)} />
              <Text style={{ color: isFocused ? colors.fontColor : '#CA9D66', fontSize: 12 }}>
                {I18n.t(this.langLabelReturn(label))}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}))
export default MyTabBar