import React from 'react';
import { Feature } from '@common-stack/client-react';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const drawerConfig = (props=null as  any) => {
    return {
    ['//main_drawer']: {
        exact: false,
        container: createDrawerNavigator(),
        name: 'MainDrawer',
        props: {
            initialRouteName: 'MainStack.MainDrawer.Home',
            screenOptions: (options: any) => {
                return {
                    headerShown: true,
                    drawerIcon: 'grid',
                };
            },
        },
    },
}};

const bottomTabConfig = {
    ['//bottom_tab']: {
        container: createBottomTabNavigator(),
        exact: false,
        name: 'MainBottomTab',
        props: {
            initialRouteName: 'MainStack.MainBottomTab.Home',
            screenOptions: ({ route }: any) => {
                return {
                    headerShown: false,
                    title: 'Home',
                    headerTitle: 'Home',
                    tabBarActiveTintColor: '#4c87f9',
                    tabBarInactiveTintColor: 'black',
                };
            },
        },
    },
};

const hostBottomTabConfig =  {
    ['//host_tab']: {
        container: createBottomTabNavigator(),
        exact: false,
        name: 'HostTab',
        props: {
            initialRouteName: 'MainStack.HostTab.Booking',
        },
    },
};

const drawerBottomTabConfig = (props=null as  any)=> {
    return {
    ['//main_drawer']: {
        exact: false,
        container: createDrawerNavigator(),
        name: 'MainDrawer',
        props: {
            initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
            screenOptions: (options: any) => {
                return {
                    headerShown: false,
                    drawerIcon: 'grid',
                };
            },
        },
    },
    ['//main_drawer/bottom_tab']: {
        container: createBottomTabNavigator(),
        exact: false,
        name: 'MainBottomTab',
        props: {
            initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
            screenOptions: ({ route }: any) => {
                return {
                    headerShown: true,
                    title: 'Home',
                    headerTitle: 'Home',
                    tabBarActiveTintColor: '#ff5a60',
                    tabBarInactiveTintColor: 'black',
                };
            },
        },
    },
}};

const bottomTabDrawerConfig =  {
    ['//bottom_tab']: {
        container: createBottomTabNavigator(),
        exact: false,
        name: 'MainBottomTab',
        props: {
            initialRouteName: 'MainStack.MainBottomTab.Home',
            screenOptions: ({ route }: any) => {
                return {
                    headerShown: false,
                    title: 'Home',
                    headerTitle: 'Home',
                    tabBarActiveTintColor: '#ff5a60',
                    tabBarInactiveTintColor: 'black',
                };
            },
        },
    },
};

export const appDrawerFeature = (props=null as  any) => new Feature({
    routeConfig: drawerConfig(props) as any,
});

export const appDrawerBottomTabFeature = (props=null as  any) => new Feature({
    routeConfig: drawerBottomTabConfig(props) as any,
});

export const appBottomTabFeature =  new Feature({
    routeConfig: bottomTabConfig as any,
});

export const appHostBottomTabFeature = new Feature({
    routeConfig: hostBottomTabConfig as any,
});

export const appBottomTabDrawerFeature =  new Feature({
    routeConfig: bottomTabDrawerConfig as any,
});