import * as React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
import {
    appDrawerFeature,
    appBottomTabFeature,
    appDrawerBottomTabFeature,
    appBottomTabDrawerFeature,
    appHostBottomTabFeature,
} from '../../components/Layout/compute';
import routeConfigKeyReplace from '../../utils/routeConfigKeyReplace';

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

export interface LayoutSettingProps {
    drawerConfig?: any;
    appFeatures?: any;
    tabBarConfig?:any;
}

export function useLayoutSetting(props = null as LayoutSettingProps) {
    const dispatch = useDispatch();
    const [settings, setAppSettings] = React.useState<any>();
    const defaultSettings = useSelector<any>((state) => state.settings) as any;
    const [appLayout, setAppLayout] = React.useState(appDrawerFeature(props?.drawerConfig ?? null));
    const [pathKey, setPathKey] = React.useState('//main_drawer/');
    const [intialRouteName, setInitialRouteName] = React.useState('MainStack.Layout');
    const [appLayoutFeatures, setAppLayoutFeatures] = React.useState<any>(null);

    React.useEffect(() => {
        if (layoutSettings) {
            const config: any = {
                ...settings,
                ...layoutSettings,
            };
            setDefalutSettings(config);
            setAppSettings(config);
        } else setAppSettings(defaultSettings);
    }, []);

    React.useEffect(() => {
        if (defaultSettings) {
            setAppSettings(defaultSettings);
        }
    }, [defaultSettings]);

    React.useEffect(() => {
        if (settings) {
            let AppLayout =
                settings?.layout == 'side'
                    ? appDrawerFeature(props)
                    : settings?.layout == 'bottom'
                    ? appBottomTabFeature(props)
                    : settings?.layout == 'host-bottom'
                    ? appHostBottomTabFeature(props)
                    : appDrawerBottomTabFeature(props);
            setAppLayout(AppLayout);

            let layoutTypeKey =
                settings?.layout == 'side'
                    ? '//main_drawer/'
                    : settings?.layout == 'bottom'
                    ? '//bottom_tab/'
                    : settings?.layout == 'host-bottom'
                    ? '//host_tab/'
                    : '//main_drawer/bottom_tab/';

            setPathKey(layoutTypeKey);

            let initialRouteName =
                settings?.layout == 'bottom'
                    ? 'MainStack.Layout'
                    : settings?.layout == 'host-bottom'
                    ? 'MainStack.Layout'
                    : 'MainStack.Layout';

            setInitialRouteName(initialRouteName);
            if (props?.appFeatures) {
                const { appFeatures } = routeConfigKeyReplace(
                    layoutTypeKey,
                    props?.appFeatures,
                    AppLayout,
                    initialRouteName,
                );
                setAppLayoutFeatures(appFeatures);
            }
        }
    }, [settings, props?.appFeatures]);

    const setDefalutSettings = (config: any) => {
        dispatch({
            type: CHANGE_SETTINGS_ACTION,
            payload: config,
        });
    };

    return { appLayout, pathKey, intialRouteName, appLayoutFeatures };
}