import React from 'react';
import { Platform } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { RouteProp, ParamListBase } from '@react-navigation/native';
import AuthLoading from '../../auth/containers/auth-loading';
import Onboarding from '../../welcome/containers/onboarding';
import Changelog from '../../welcome/containers/changelog';
import Login from '../../auth/containers/login';
import { TabNavigation } from './tab-navigation';
import { SBox } from '../../common/s-components/layout/s-box';
import { SText } from '../../common/s-components/typography/s-text';

const Tab = createBottomTabNavigator();

const Drawer = createDrawerNavigator();
let Storybook:
  | React.ComponentType<{}>
  | React.ComponentType<{
      route: RouteProp<ParamListBase, 'Storybook'>;
      navigation: any;
    }>;

if (Platform.OS === 'android') {
  Storybook = () => (
    <SBox flex={1} alignItems="center" justifyContent="center">
      <SText>Storybook</SText>
    </SBox>
  );
} else {
  // eslint-disable-next-line global-require
  Storybook = require('../../../storybook').default;
}

const WithStorybook = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Approot"
      screenOptions={{ headerShown: false }}
    >
      <Drawer.Screen name="TabNavigation" component={TabNavigation} />
      <Drawer.Screen name="Storybook" component={Storybook} />
    </Drawer.Navigator>
  );
};

export const AppSwitch = () => {
  return (
    <Tab.Navigator
      tabBar={() => null}
      initialRouteName="AuthLoading"
      // @ts-ignore
      screenOptions={{ headerShown: false }}
    >
      <Tab.Screen name="AuthLoading" component={AuthLoading} />
      <Tab.Screen name="Auth" component={Login} />
      {/*@ts-ignore*/}
      {global.__DEV__ ? (
        <Tab.Screen name="App" component={WithStorybook} />
      ) : (
        <Tab.Screen name="App" component={TabNavigation} />
      )}
      <Tab.Screen name="Onboarding" component={Onboarding} />
      <Tab.Screen name="Changelog" component={Changelog} />
    </Tab.Navigator>
  );
};