import { StackNavigationOptions } from '@react-navigation/stack';
import i18next from 'i18next';
import Routes from '@constants/routes';
import { blue, white } from '@constants/colors';
import statusBarConfig from '@constants/statusBar';
import { Navigation } from '@interfaces/navigation';

import fonts from './fonts';

// Default nav options for all screens
const defaultNavOptions = ({ route }: Navigation) => ({
    // Change screen title from i18n traslates files
    headerTitle: i18next.t(`app:${route.name}`),
    // TODO: The following options are examples. Change them to your need
    headerStyle: {
      backgroundColor: blue
    },
    headerBackTitleStyle: {
      color: white
    },
    headerTitleStyle: {
      ...fonts.baseFont,
      color: white
    },
    headerTintColor: white
});

export const appStackNavConfig = {
  screenOptions: defaultNavOptions
};
<%_ if(features.loginandsignup) { _%>

export const authStackNavConfig = {
  screenOptions: defaultNavOptions,
  initialRouteName: Routes.Login
};
<%_ } _%>
<%_ if(features.tabs) { _%>

const defaultTabNavOptions = {
  // TODO: Change them to your need
}

export const tabNavConfig = {
  // TODO: Change them to your need
  // tabBarOptions: {
  //   activeTintColor: 'blue',
  //   inactiveTintColor: 'gray',
  // }
  screenOptions: defaultTabNavOptions
};
<%_ } _%>
<%_ if(features.drawer) { _%>

const defaultDrawerNavOptions = {
  // TODO: Change them to your need
};

export const drawerStackNavConfig = {
  screenOptions: defaultDrawerNavOptions
};
<%_ } _%>

// Default nav options for all screens
export const appScreensNavOptions: Partial<Record<Routes, StackNavigationOptions>> = {
  // TODO: Add here the screens nav options that changes with respect to
  // the default ones defined in defaultNavOptions, for example...
  <%_ if(features.loginandsignup) { _%>
  [Routes.Login]: {
    headerShown: false
  },
  <%_ } _%>
  <%_ if(features.onboarding) { _%>
  [Routes.OnBoarding]: {
    headerShown: false
  },
  <%_ } _%>
  [Routes.Home]: {
    headerTitle: 'Home'
  }
};

export const statusBarStyles = {
  // TODO: Change these styles to customize the status bar
  <%_ if (features.loginandsignup) { _%>
  [Routes.Login]: statusBarConfig.whiteStatusBar,
  [Routes.SignUp]: statusBarConfig.blueStatusBar,
  <%_ } _%>
  <%_ if (features.tabs) { _%>
  [Routes.Tab1]: statusBarConfig.blueStatusBar,
  [Routes.Tab2]: statusBarConfig.blueStatusBar,
  <%_ } _%>
  [Routes.Home]: statusBarConfig.blueStatusBar,
  default: statusBarConfig.transparentStatusBar
};