import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import Home from '../pages/home/home';
import Profile from '../pages/profile/profile';
import News from '../pages/news/news';
import Info from '../pages/info/info';
import {TopTab} from '../common/topTab';
import TabButton from './TabButton';
import DeviceInfo from 'react-native-device-info';
import History from '../pages/history/history';
import {colors} from '../assets/styles/colors-theme';
import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
import Global from '../services/Global';
import history from '../common/history';

const styles = StyleSheet.create({
  TabletTabButton: {
    justifyContent: 'center',
    alignItems: 'center',
    width: scale(24),
    height:150,
  },
  tabButtion: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const addButtonSize = () => {
  if (DeviceInfo.isTablet()) {
    return 20;
  } else {
    return 30;
  }
};

const TabRouterMap = {
  home: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: 'Home',
      tabBarIcon: ({focused}) => (
        <TabButton
          focused={focused}
          labelName="Home"
          iconName={'home'}
          label={'home'}
        />
      ),
    },
  },
  info: {
    screen: Info,
    navigationOptions: {
      tabBarLabel: 'Info',
      tabBarIcon: ({focused}) => (
        <TabButton
          focused={focused}
          labelName="Info"
          iconName={'info'}
          label={'info'}
        />
      ),
    },
  },
  add: {
    screen: () => Home,
    navigationOptions: {
      tabBarOnPress: ({navigation, defaultHandler}) => {
        history.pushFromtab(navigation, '/add');
      },
      title: 'MIN SALONG',
      tabBarIcon: ({tintColor, focused}) => (
        <View style = {{marginTop:3}}>
          <Icon
            solid
            focused={focused}
            size={addButtonSize()}
            name={'plus-square'}
            //color={focused ? colors.mainColor : colors.maingray}
            color={colors.mainColor}
          />
          <Text style={{color: colors.maingray,marginTop:3}}>{'新增'}</Text>
        </View>
      ),
    },
  },
  History: {
    screen: History,
    navigationOptions: ({navigation}) => ({
      tabBarOnPress: ({navigation, defaultHandler}) => {
        if (Global.login) {
          defaultHandler();
        } else {
          history.pushFromtab(navigation, '/signin', {icon: true});
        }
      },
      tabBarLabel: 'History',
      tabBarIcon: ({focused}) => (
        <TabButton
          focused={focused}
          labelName="History"
          iconName={'folder'}
          label={'history'}
        />
      ),
    }),
  },
  Profile: {
    screen: Profile,
    navigationOptions: ({navigation}) => ({
      tabBarOnPress: ({navigation, defaultHandler}) => {
        if (Global.login) {
          defaultHandler();
        } else {
          // history.pushFromtab(navigation,'/signin',{icon:true})
          defaultHandler();
        }
      },
      tabBarLabel: 'Profile',
      tabBarIcon: ({focused}) => (
        <TabButton
          focused={focused}
          labelName="Profile"
          iconName={'user'}
          label={'profile'}
        />
      ),
    }),
  },
};

export const TabNav = createBottomTabNavigator(TabRouterMap, {
  initialRouteName: 'home',
  transitionConfig: () => fromLeft(),
  navigationOptions: ({navigation}) => ({
    tabBarIcon: ({focused, tintColor}) => {
      const {routeName} = navigation.state;
      let iconName;
      if (routeName === 'page3') {
        history.push(this, '/signup');
      }
    },
  }),
  tabBarOptions: {
    //当前选中的tab bar的文本颜色和图标颜色
    activeTintColor: colors.statusBarColor,
    //当前未选中的tab bar的文本颜色和图标颜色
    inactiveTintColor: '#000',
    //是否显示tab bar的图标，默认是false
    showIcon: true,
    //showLabel - 是否显示tab bar的文本，默认是true
    showLabel: false,
    //是否将文本转换为大小，默认是true
    upperCaseLabel: false,
    //material design中的波纹颜色(仅支持Android >= 5.0)
    pressColor: 'red',
    //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
    pressOpacity: 0.8,
    //tab bar的样式
    style: {
      shadowColor: 'transparent',
      height:60,
      shadowRadius: 0,
      shadowOpacity: 0,
      elevation: 0,
      borderTopWidth: 0,
      elevation: 0,
      shadowOffset: {
        height: 0,
      },
      headerStyle: {
        shadowColor: 'transparent',
        backgroundColor: '#fff',
        borderTopWidth: 0,
        elevation: 0,
        shadowOpacity: 0,
      },
    },
    //tab bar的文本样式
    labelStyle: {
      fontSize: 11,
      margin: 1,
    },
    //tab 页指示符的样式 (tab页下面的一条线).
    indicatorStyle: {height: 0},
  },
  //tab bar的位置, 可选值： 'top' or 'bottom'
  tabBarPosition: 'bottom',
  //是否允许滑动切换tab页
  swipeEnabled: true,
  //是否在切换tab页时使用动画
  animationEnabled: true,
  //是否懒加载
  lazy: true,
  //返回按钮是否会导致tab切换到初始tab页？ 如果是，则设置为initialRoute，否则为none。 缺省为initialRoute。
  backBehavior: 'none',
});
