/**
 * Created by MeePwn
 * https://github.com/maybewaityou
 *
 * description:
 *
 */
import React from 'react';
import { Image, Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import { BottomTabBar } from 'react-navigation-tabs';
import { navigator, router } from 'mario-navigation-extension';
import SplashScreen from 'react-native-splash-screen';

import { Images, Style, Color } from '@constant';
import { TabHeaderTitle } from '@configs/navigation';
import { HomeView } from './pages/home/index';
import { InformationView } from './pages/information/index';
import { MessageView } from './pages/message/index';
import { MeView } from './pages/me/index';

export enum TabSelector {
  HOME = 'Home',
  INFORMATION = 'Information',
  MESSAGE = 'Message',
  ME = 'Me',
}

export default createBottomTabNavigator(
  {
    Home: { screen: HomeView },
    Information: { screen: InformationView },
    Message: { screen: MessageView },
    Me: { screen: MeView },
  },
  {
    defaultNavigationOptions: ({ navigation }: any) => ({
      tabBarIcon: ({ focused, tintColor }: any) => {
        const { routeName } = navigation.state;
        const imageStyle = focused ? Style.tabBar.imageSelected : Style.tabBar.image;
        if (routeName === TabSelector.HOME) {
          return <Image source={focused ? Images.homeSelected : Images.home} style={imageStyle} />;
        } else if (routeName === TabSelector.INFORMATION) {
          return <Image source={focused ? Images.infoSelected : Images.info} style={imageStyle} />;
        } else if (routeName === TabSelector.MESSAGE) {
          return <Image source={focused ? Images.messageSelected : Images.message} style={imageStyle} />;
        } else if (routeName === TabSelector.ME) {
          return <Image source={focused ? Images.meSelected : Images.me} style={imageStyle} />;
        }
      },
      tabBarLabel: ({ focused, tintColor }: any) => {
        const { routeName } = navigation.state;
        const style = focused ? Style.tabBar.labelSelected : Style.tabBar.label;
        if (routeName === TabSelector.HOME) {
          return <Text style={style}>{TabHeaderTitle.HOME}</Text>;
        } else if (routeName === TabSelector.INFORMATION) {
          return <Text style={style}>{TabHeaderTitle.INFORMATION}</Text>;
        } else if (routeName === TabSelector.MESSAGE) {
          return <Text style={style}>{TabHeaderTitle.MESSAGE}</Text>;
        } else if (routeName === TabSelector.ME) {
          return <Text style={style}>{TabHeaderTitle.ME}</Text>;
        }
      },
    }),
    tabBarComponent: (props: Readonly<any>) => {
      router || SplashScreen.hide();
      router || navigator.init(props.navigation);
      return <BottomTabBar {...props} style={Style.tabBar.container} />;
    },
    tabBarOptions: {
      activeTintColor: Color.dark,
      inactiveTintColor: 'gray',
    },
    tabBarPosition: 'bottom',
  },
);