import React from 'react';
import { Feature } from '@common-stack/client-react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Drawer, BottomTabBar, Header } from './components';
import {  AntDesign } from '@expo/vector-icons';
import { navigationRef } from '@common-stack/client-react';

const layoutSettingConfig =
    process.APP_ENV && process.APP_ENV.LAYOUT_SETTINGS ? JSON.parse(process.APP_ENV.LAYOUT_SETTINGS) : null;

const headerSettings: any = layoutSettingConfig
    ? {
          showToggle: layoutSettingConfig.hasOwnProperty('topLeftToggle')
              ? layoutSettingConfig.topLeftToggle
                  ? true
                  : false
              : true,
          rightSettingToggle: layoutSettingConfig.hasOwnProperty('topRightSettingToggle')
              ? layoutSettingConfig.topRightSettingToggle
                  ? true
                  : false
              : true,
      }
    : { showToggle: true, rightSettingToggle: true };

const drawerConfig = (props: any) => {
    let drawerProps = props?.drawerConfig??null;
    return {
        ['//main_drawer']: {
            exact: false,
            container: createDrawerNavigator(),
            name: 'Layout',
            props: {
                initialRouteName: 'MainStack.Layout.Home',
                drawerContent: (props: any) => {
                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
                    let currentOptions = currentRoute?.params?.options
                        ? JSON.parse(currentRoute?.params?.options)
                        : null;
                    let drawerOptions = { ...currentOptions?.drawerOption, ...drawerProps?.drawerOption };
                    return React.createElement(
                        drawerProps?.drawerContent ?? Drawer,
                        Object.assign({}, props, {
                            title: 'ClockBook',
                            titleColor: 'black',
                            logout: true,
                            redirect: 'MainStack.Login',
                            ...drawerOptions,
                        }),
                    );
                },
                screenOptions: (options: any) => {
                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
                    let currentOptions = currentRoute?.params?.options
                        ? JSON.parse(currentRoute?.params?.options)
                        : null;
                    return {
                        headerShown: true,
                        header: (props: any) => (
                            <Header
                                showToggle={
                                    headerSettings && headerSettings.showToggle ? headerSettings.showToggle : false
                                }
                                right={
                                    headerSettings && headerSettings.rightSettingToggle
                                        ? headerSettings.rightSettingToggle
                                        : false
                                }
                                {...props}
                            />
                        ),
                        drawerIcon: 'grid',
                        drawerStyle: currentOptions?.drawerStyle ?? drawerProps?.drawerStyle ?? {},
                        gestureEnabled: currentOptions?.gestureEnabled ?? true,
                        swipeEnabled: currentOptions?.swipeEnabled ?? true,
                    };
                },
            },
        },
    };
};

const bottomTabConfig = (props: any) => {
    let tabBarConfig = props?.tabBarConfig??null;
    return { 
        ['//bottom_tab']: {
            exact: false,
            container: createBottomTabNavigator(),
            name: 'Layout',
            props: {
                initialRouteName: 'MainStack.Layout.Home',
                //tabBar: (props: any) => <BottomTabBar {...props} />,
                tabBar: (props: any) => {
                    return React.createElement(
                        tabBarConfig?.bottomTabBar ?? BottomTabBar,
                        Object.assign({}, {...props,...{customTabBarProps:tabBarConfig?.tarBarProps??{}}}),
                    );
                },
                screenOptions: ({ route }: any) => {
                    return {
                        headerShown: false,
                        title: 'Home',
                        headerTitle: 'Home',
                        tabBarActiveTintColor: '#4c87f9',
                        tabBarInactiveTintColor: 'black',
                        tabBarIcon: ({ color }: { color: any }) => <AntDesign name={'search1'} color={color} size={24} />,
                    };
                },
            },
    },
}};

const hostBottomTabConfig = (props: any) => {
    let tabBarConfig = props?.tabBarConfig??null;
    return {
    ['//host_tab']: {
        container: createBottomTabNavigator(),
        exact: false,
        name: 'Layout',
        props: {
            initialRouteName: 'MainStack.Layout.Home',
            //tabBar: (props: any) => <BottomTabBar {...props} />,
            tabBar: (props: any) => {
                return React.createElement(
                    tabBarConfig?.bottomTabBar ?? BottomTabBar,
                    Object.assign({}, {...props,...{customTabBarProps:tabBarConfig?.tarBarProps??{}}}),
                );
            },
            screenOptions: (props: any) => {
                return {
                    headerShown: false,
                    title: 'Home',
                    headerTitle: 'Home',
                    tabBarActiveTintColor: '#4c87f9',
                    tabBarInactiveTintColor: 'black',
                    tabBarIcon: ({ color }: { color: any }) => <AntDesign name={'search1'} color={color} size={24} />,
                };
            },
        },
    },
}};

const drawerBottomTabConfig = (props: any) => {
    let drawerProps = props?.drawerConfig??null;
    let tabBarConfig = props?.tabBarConfig??null;
    return {
        ['//main_drawer']: {
            exact: false,
            container: createDrawerNavigator(),
            name: 'Layout',
            props: {
                initialRouteName: 'MainStack.Layout.MainBottomTab',
                drawerContent: (props: any) => {
                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
                    let currentOptions = currentRoute?.params?.options
                        ? JSON.parse(currentRoute?.params?.options)
                        : null;
                    let drawerOptions = { ...currentOptions?.drawerOption, ...drawerProps?.drawerOption };
                    return React.createElement(
                        drawerProps?.drawerContent ?? Drawer,
                        Object.assign({}, props, {
                            title: 'ClockBook',
                            titleColor: 'black',
                            logout: true,
                            redirect: 'MainStack.Login',
                            ...drawerOptions,
                        }),
                    );
                },
                screenOptions: (options: any) => {
                    let currentRoute = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
                    let currentOptions = currentRoute?.params?.options
                        ? JSON.parse(currentRoute?.params?.options)
                        : null;
                    return {
                        headerShown: false,
                        drawerIcon: 'grid',
                        drawerStyle: currentOptions?.drawerStyle ?? drawerProps?.drawerStyle ?? {},
                        gestureEnabled: currentOptions?.gestureEnabled ?? true,
                        swipeEnabled: currentOptions?.swipeEnabled ?? true,
                    };
                },
            },
        },
        ['//main_drawer/bottom_tab']: {
            container: createBottomTabNavigator(),
            exact: false,
            name: 'MainBottomTab',
            props: {
                initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
                //tabBar: (props: any) => <BottomTabBar {...props} />,
                tabBar: (props: any) => {
                    return React.createElement(
                        tabBarConfig?.bottomTabBar ?? BottomTabBar,
                        Object.assign({}, {...props,...{customTabBarProps:tabBarConfig?.tarBarProps??{}}}),
                    );
                },
                screenOptions: ({ route }: any) => {
                    return {
                        headerShown: true,
                        header: (props: any) => (
                            <Header
                                showToggle={
                                    headerSettings && headerSettings.showToggle ? headerSettings.showToggle : false
                                }
                                right={
                                    headerSettings && headerSettings.rightSettingToggle
                                        ? headerSettings.rightSettingToggle
                                        : false
                                }
                                {...props}
                            />
                        ),
                        title: 'Home',
                        headerTitle: 'Home',
                        tabBarActiveTintColor: '#ff5a60',
                        tabBarInactiveTintColor: 'black',
                    };
                },
            },
        },
    };
};

const bottomTabDrawerConfig = (props: any) => {
    let drawerProps = props?.drawerConfig??null;
    let tabBarConfig = props?.tabBarConfig??null;

    return { 
        ['//bottom_tab']: {
            container: createBottomTabNavigator(),
            exact: false,
            name: 'Layout',
            props: {
                initialRouteName: 'MainStack.Layout.Home',
               // tabBar: (props: any) => <BottomTabBar {...props} />,
               tabBar: (props: any) => {
                return React.createElement(
                    tabBarConfig?.bottomTabBar ?? BottomTabBar,
                    Object.assign({}, {...props,...{customTabBarProps:tabBarConfig?.tarBarProps??{}}}),
                );
                },
                screenOptions: ({ route }: any) => {
                    return {
                        headerShown: true,
                        header: (props: any) => (
                            <Header
                                showToggle={
                                    headerSettings && headerSettings.showToggle ? headerSettings.showToggle : false
                                }
                                right={
                                    headerSettings && headerSettings.rightSettingToggle
                                        ? headerSettings.rightSettingToggle
                                        : false
                                }
                                {...props}
                            />
                        ),
                        title: 'Home',
                        headerTitle: 'Home',
                        tabBarActiveTintColor: '#ff5a60',
                        tabBarInactiveTintColor: 'black',
                    };
                },
                // screenOptions: ({ route }: any) => {
                //     return {
                //         headerShown: false,
                //         //header: (props: any) => <Header showToggle={true} right={true} {...props} />,
                //         title: 'Home',
                //         headerTitle: 'Home',
                //         tabBarActiveTintColor: '#ff5a60',
                //         tabBarInactiveTintColor: 'black',
                //     };
                // },
            },
        },
        // ['//bottom_tab/main_drawer']: {
        //     exact: false,
        //     container: createDrawerNavigator(),
        //     name: 'MainDrawer',
        //     props: {
        //         initialRouteName: 'MainStack.MainBottomTab.MainDrawer.Home',
        //         drawerContent: (props: any) => (
        //             <Drawer
        //             {...props}
        //             title={'ClockBook'}
        //             titleColor={'black'}
        //             logout={true}
        //             redirect={'MainStack.Login'}
        //             />
        //             ),
        //             screenOptions:(options:any) =>{
    
        //                 return{
        //                     headerShown: true,
        //                     header: (props: any) => <Header showToggle={true} right={true} {...props} />,
        //                     drawerIcon: 'grid',
        //                 }
        //             }
        //         },
        //     },
    };

}

// const bottomTabDrawerConfig = { 
//     ['//bottom_tab']: {
//         container: createBottomTabNavigator(),
//         exact: false,
//         name: 'Layout',
//         props: {
//             initialRouteName: 'MainStack.Layout.Home',
//             tabBar: (props: any) => <BottomTabBar {...props} />,
//             screenOptions: ({ route }: any) => {
//                 return {
//                     headerShown: false,
//                     //header: (props: any) => <Header showToggle={true} right={true} {...props} />,
//                     title: 'Home',
//                     headerTitle: 'Home',
//                     tabBarActiveTintColor: '#ff5a60',
//                     tabBarInactiveTintColor: 'black',
//                 };
//             },
//         },
//     },
//     // ['//bottom_tab/main_drawer']: {
//     //     exact: false,
//     //     container: createDrawerNavigator(),
//     //     name: 'MainDrawer',
//     //     props: {
//     //         initialRouteName: 'MainStack.MainBottomTab.MainDrawer.Home',
//     //         drawerContent: (props: any) => (
//     //             <Drawer
//     //             {...props}
//     //             title={'ClockBook'}
//     //             titleColor={'black'}
//     //             logout={true}
//     //             redirect={'MainStack.Login'}
//     //             />
//     //             ),
//     //             screenOptions:(options:any) =>{

//     //                 return{
//     //                     headerShown: true,
//     //                     header: (props: any) => <Header showToggle={true} right={true} {...props} />,
//     //                     drawerIcon: 'grid',
//     //                 }
//     //             }
//     //         },
//     //     },
// };

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

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

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

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

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

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

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