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 { s, vs, ms } from 'react-native-size-matters';
import DeviceInfo from 'react-native-device-info';
Icon.loadFont();
@inject('appStore')
@observer
export default class MyTabBar extends React.Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

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

      case 'ShoppingCart':
        return this.store.text.shoppingcart;
        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: 'white' }}>
        {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-outline';
              break;
            case 'BuyHistory':
              iconName = 'history';
              break;
            case 'ShoppingCart':
              iconName = 'shopping-outline';
              break;
            case 'Favorite':
              iconName = 'heart-outline';
              break;
            case 'Profile':
              iconName = 'account-outline';
              break;
          }

          const isFocused = state.index === index;

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

            if (!isFocused && !event.defaultPrevented) {
              this.store.catalogueSelected = null;
              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);
              }
            } else if (isFocused && route.name == 'Main') {
              this.store.catalogueSelected = null;
            }
          };

          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 ? colors.mainColor : 'black'}
              />
              <Text
                style={{
                  color: isFocused ? colors.mainColor : 'black',
                  fontSize: 12,
                }}>
                {this.langLabelReturn(label)}
              </Text>
              {label == 'ShoppingCart' ? (
                <View
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    position: 'absolute',

                    right: DeviceInfo.isTablet() ? s(30) : s(24),
                  }}>
                  <Icon name="circle" color={colors.mainColor} size={18} />
                  <Text
                    style={{
                      position: 'absolute',
                      top: 4,
                      fontSize: 8,
                      color: 'white',
                    }}>
                    {this.store.shoppingCartList.length}
                  </Text>
                </View>
              ) : (
                  <View />
                )}
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}