import React from 'react';
import renderer from 'react-test-renderer';
import { ProLayout } from '../containers/layout/ProLayout';
import { Feature } from '@common-stack/client-react';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createDrawerNavigator } from '@react-navigation/drawer';
const MyComponent = () => {
    const routerConfig = {
        ['/']: {
            exact: false,
            container: createStackNavigator(),
            name: 'MainStack',
            props: {
                initialRouteName: 'MainStack.MainDrawer',
                screenOptions: {
                    headerShown: false,
                },
            },
        },
        ['//maindrawer']: {
            container: createDrawerNavigator(),
            exact: false,
            name: 'MainDrawer',
            props: {
                initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
                screenOptions: {
                    headerShown: false,
                    tabBarLabel: 'About',
                    // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
                },
            },
        },
        ['//maindrawer/bottom_tab']: {
            container: createBottomTabNavigator(),
            exact: false,
            name: 'MainBottomTab',
            props: {
                initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
                screenOptions: {
                    headerShown: false,
                    tabBarLabel: 'About',
                    // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
                },
            },
        },
        ['//maindrawer/bottom_tab/home']: {
            name: 'Home',
            props: {
                priority: 1,
                initialParams: { orgName: 'test' },
                component: MyComponent,
                options: {
                    headerShown: true,
                    tabBarLabel: 'Home',
                    headerTitle: 'Home',
                    // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
                },
            },
        },
        ['//maindrawer/bottom_tab/home/:about']: {
            exact: false,
            container: createStackNavigator(),
            name: 'About',
            props: {
                initialRouteName: 'Hello',
            },
        },
        ['//maindrawer/bottom_tab/home/:about/info']: {
            name: 'Info',
            props: {
                priority: 2,
                initialParams: {},
                component: MyComponent,
                options: {
                    headerTitle: 'Info',
                },
            },
        },
        ['//maindrawer/bottom_tab/account']: {
            name: 'Account',
            props: {
                priority: 3,
                initialParams: {},
                component: MyComponent,
                options: {
                    headerShown: true,
                    tabBarLabel: 'Account',
                    headerTitle: 'Account',
                    // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
                },
            },
        },
    };

    const feature = new Feature({ routeConfig: [routerConfig] });
    return <ProLayout features={feature} />;
};

test('renders correctly', () => {
    const tree = renderer.create(<MyComponent />).toJSON();
    expect(tree).toMatchSnapshot();
});

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

// const MyComponent = () => {};

// describe('prolayout feature testing with basic routes', () => {
//     const routerConfig: IRouteData = {
//         ['/']: {
//             exact: false,
//             container: createStackNavigator(),
//             name: 'MainStack',
//             props: {
//                 initialRouteName: 'MainStack.MainDrawer',
//                 screenOptions: {
//                     headerShown: false,
//                 },
//             },
//         },
//         ['//maindrawer']: {
//             container: createDrawerNavigator(),
//             exact: false,
//             name: 'MainDrawer',
//             props: {
//                 initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
//                 screenOptions: {
//                     headerShown: false,
//                     tabBarLabel: 'About',
//                     // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
//                 },
//             },
//         },
//         ['//maindrawer/bottom_tab']: {
//             container: createBottomTabNavigator(),
//             exact: false,
//             name: 'MainBottomTab',
//             props: {
//                 initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
//                 screenOptions: {
//                     headerShown: false,
//                     tabBarLabel: 'About',
//                     // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
//                 },
//             },
//         },
//         ['//maindrawer/bottom_tab/home']: {
//             name: 'Home',
//             props: {
//                 priority: 1,
//                 initialParams: { orgName: 'test' },
//                 component: MyComponent,
//                 options: {
//                     headerShown: true,
//                     tabBarLabel: 'Home',
//                     headerTitle: 'Home',
//                     // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
//                 },
//             },
//         },
//         ['//maindrawer/bottom_tab/home/:about']: {
//             exact: false,
//             container: createStackNavigator(),
//             name: 'About',
//             props: {
//                 initialRouteName: 'Hello',
//             },
//         },
//         ['//maindrawer/bottom_tab/home/:about/info']: {
//             name: 'Info',
//             props: {
//                 priority: 2,
//                 initialParams: {},
//                 component: MyComponent,
//                 options: {
//                     headerTitle: 'Info',
//                 },
//             },
//         },
//         ['//maindrawer/bottom_tab/account']: {
//             name: 'Account',
//             props: {
//                 priority: 3,
//                 initialParams: {},
//                 component: MyComponent,
//                 options: {
//                     headerShown: true,
//                     tabBarLabel: 'Account',
//                     headerTitle: 'Account',
//                     // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
//                 },
//             },
//         },
//     };

//     it('get prolayout getSortedNavigations', () => {
//         const feature = new Feature({ routeConfig: routerConfig });
//         const Render = feature.getRoutes2('/', 'MainStack');
//         const Nav = getSortedNavigations('/', routerConfig);
//         console.log('Nav1', JSON.stringify(Nav));
//         expect(Render).toMatchSnapshot();
//     });
// });