import * as React from 'react';
import { useRoute } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import {Text,ImageBackground} from 'react-native';
import { PrimaryTheme } from '../../styles/Themes';
import { DrawerContent } from './drawerContent';
import { globalStyles,customStyles,GetPageTheme } from "../../styles/Global";

// screens
import Project from '../../screens/Project';
import Login from '../../screens/Login';
import Mpin from '../../screens/Mpin';
import MpinLogin from '../../screens/MpinLogin';
import NoticeBoard from '../../screens/NoticeBoard';
import One_QAD from '../../screens/One_QAD';
import ReportsMenu from '../../screens/ReportsMenu';
import UploadDataScreen from '../../screens/UploadData';
import Splash from '../../screens/SplashScreen';
import VisitorLogin from '../../screens/VisitorLogin';
import PersonalDocument from '../../screens/PersonalDocument';
import Training from '../../screens/Training';
import StoreList from '../../screens/StoreList';
import StoreDailyMenu from '../../screens/StoreDailyMenu';
import StoreCheckin from '../../screens/CheckInStore';
import GeoTag from '../../screens/GeoTag';
import ShowMap from '../../screens/ShowMap';
import StoreNonWorkingReasons from '../../screens/StoreNonWorkingReasons';
import Settings from '../../screens/Settings';
import CompetitionVisibility from '../../screens/CompetitionVisibility';
import CompetitionPromotion from '../../screens/CompetitionPromotion';
import SurveyList from '../../screens/SurveyList';
import SurveyView from '../../screens/SurveyView';
import SurveyCat from '../../screens/SurveyCat';
import ContactUs from '../../screens/ContactUs';
import StoreImages from '../../screens/StoreImages';
import StoreImagesCap from '../../screens/StoreImagesCap';
import CameraScreen from '../../screens/CameraScreen';
import StoreDailyMenuCat from '../../screens/StoreDailyMenuCat';

import TeamList from '../../screensSup/TeamList';
import Attendance from '../../screensSup/Attendance';
import Album from '../../screensSup/Album';
import ReportDetail from '../../screensSup/ReportDetail';
import BannerDetail from '../../screens/Bannerdetail';
import HR from '../../screens/HR';
import ViewListData from '../../screens/ViewListData';
import VideoScreen from '../../screens/VideoScreen';
import GetDb from '../../screens/GetDb';
import GateMeeting from '../../screens/GateMeeting';
import AddGateMeeting from '../../screens/AddGateMeeting';
import AttendanceSup from '../../screens/AttendanceSup';
import VisibilityAudit from '../../screens/VisibilityAudit';
import VisibilityAuditList from '../../screens/VisibilityAuditList';
import SearchStoreList from '../../screens/SearchStoreList';
import DistributorList from '../../screens/DistributorList';
import DBNonWorkingReasons from '../../screens/DBNonWorkingReasons';
import DB_POSM from '../../screens/DB_POSM';
import DB_StoreDailyMenu from '../../screens/DB_StoreDailyMenu';
import CheckInDistributor from '../../screens/CheckInDistributor';
import DBVisiCooler from '../../screens/DBVisiCooler';
import TrainingMenu from '../../screens/TrainingMenu';

// new 
import ImageAuditStoreList from '../../screens/ImageAuditStoreList';
import ImageAudit from '../../screens/ImageAudit';
import NPNDStoreList from '../../screens/NPNDStoreList';
import POSSale from '../../screens/POSSale';
import PeopleDetail from '../../screens/PeopleDetail';
import DashboardReportDetail from '../../screens/DashboardReportDetail';
import DashboardDrilldown from '../../screens/DashboardDrilldown';
import PeopleDrilldown from '../../screens/PeopleDrilldown';
import GroomingPictures from '../../screens/GroomingPictures';


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();


function DrawerRoutes(props) { 
    const route = useRoute();
    const PageTheme=GetPageTheme(props.DarkMode,route.name);
    const customStyle=customStyles(props.DarkMode,route.name);
    const globalStyle=globalStyles(props.DarkMode,route.name);
    let props1=props

    let params=props.route.params? props.route.params:{};
    let UserData=params.UserData || {};
    let username=UserData.UserId || '';
    let set_startDownload=params.set_startDownload || function (){};
    let useremail='';
    let pageprops=props.pageprops;
  
    return (
        <Drawer.Navigator initialRouteName="NoticeBoard" drawerContent={props => <DrawerContent {...props} propsData={props1} UserName={username} UserEmail={useremail} pageprops={pageprops}/>}
        screenOptions={{
            headerTintColor:PrimaryTheme.$primary_color,
            drawerType:'front',
        }}>
            <Drawer.Screen name="NoticeBoard" component={NoticeBoard}  options={{
                // headerStyle: { backgroundColor: PrimaryTheme.$bg_color,borderBottomWidth:1,borderBottomColor:PrimaryTheme.$secondary_color_light },
                // headerTitleStyle: { color: PrimaryTheme.$primary_color,fontSize:16},
                // headerTitleAlign: 'center',
                headerShown:false,
                // headerBackground:()=>{<LinearGradient colors={[PageTheme.$gradient2,PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={globalStyle.drawerScreenbg}></LinearGradient>}
                
            }} />            
        </Drawer.Navigator>
    )
}


export const AuthStack = (props) => { 
   let props1=props;
    return(
        <Stack.Navigator initialRouteName={'initialScreen'}>
            <Stack.Screen name={'initialScreen'} component={Splash} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen  name={'Project'} component={Project} options={{ headerShown: false }}></Stack.Screen>
            
            <Stack.Screen {...props} name={'NoticeBoard'}  options={{ headerShown: false }}>
                {props =><DrawerRoutes {...props} pageprops={props1}  />}
            </Stack.Screen>
            <Stack.Screen {...props} name={'One_QAD'} component={One_QAD}  options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'UploadData'} component={UploadDataScreen} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'StoreList'} component={StoreList} options={{ headerShown: false }}></Stack.Screen>

            <Stack.Screen name={'StoreCheckin'} component={StoreCheckin} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'StoreDailyMenu'} component={StoreDailyMenu} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'StoreDailyMenuCat'} component={StoreDailyMenuCat} options={{ headerShown: false }}></Stack.Screen>
            
            <Stack.Screen name={'TeamList'} component={TeamList} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'GateMeeting'} component={GateMeeting} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'AddGateMeeting'} component={AddGateMeeting} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'AttendanceSup'} component={AttendanceSup} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'SearchStoreList'} component={SearchStoreList} options={{ headerShown: false }}></Stack.Screen>
            


            <Stack.Screen name={'CompetitionVisibility'} component={CompetitionVisibility} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'CompetitionPromotion'} component={CompetitionPromotion} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'SurveyList'} component={SurveyList} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'SurveyCat'} component={SurveyCat} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'SurveyView'} component={SurveyView} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'StoreImages'} component={StoreImages} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'POSSale'} component={POSSale} options={{ headerShown: false }}></Stack.Screen>

            <Stack.Screen name={'Attendance'} component={Attendance} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'Album'} component={Album} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'ReportDetail'} component={ReportDetail} options={{ headerShown: false }}></Stack.Screen>
            
            
            <Stack.Screen name={'ReportsMenu'} component={ReportsMenu} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'Settings'} component={Settings} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'VisitorLogin'} component={VisitorLogin} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'PersonalDocument'} component={PersonalDocument} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'Training'} component={Training} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'ImageAudit'} component={ImageAudit} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'StoreImagesCap'} component={StoreImagesCap} options={{ headerShown: false }}></Stack.Screen>
            
            <Stack.Screen name={'CameraScreen'} component={CameraScreen} options={{ headerShown: false }}></Stack.Screen>
            
            <Stack.Screen name={'GetDb'} component={GetDb} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'DistributorCheckIn'} component={CheckInDistributor} options={{ headerShown: false }}></Stack.Screen>          
            <Stack.Screen name={'DistributorList'} component={DistributorList} options={{ headerShown: false }}></Stack.Screen>          
            <Stack.Screen name={'DBNonWorkingReasons'} component={DBNonWorkingReasons} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'DB_StoreDailyMenu'} component={DB_StoreDailyMenu} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'DB_POSM'} component={DB_POSM} options={{ headerShown: false }}></Stack.Screen>
            
            <Stack.Screen name={'GeoTag'} component={GeoTag} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'StoreNonWorkingReasons'} component={StoreNonWorkingReasons} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'ShowMap'} component={ShowMap} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'Login'} component={Login} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'Mpin'} component={Mpin} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'MpinLogin'} component={MpinLogin} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'ContactUs'} component={ContactUs} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'Bannerdetail'} component={BannerDetail} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'HR'} component={HR} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'ViewListData'} component={ViewListData} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'VideoScreen'} component={VideoScreen} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'VisibilityAudit'} component={VisibilityAudit} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'VisibilityAuditList'} component={VisibilityAuditList} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'DBVisiCooler'} component={DBVisiCooler} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'TrainingMenu'} component={TrainingMenu} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'ImageAuditStoreList'} component={ImageAuditStoreList} options={{ headerShown: false }}></Stack.Screen>
           
            <Stack.Screen name={'NPNDStoreList'} component={NPNDStoreList} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'PeopleDetail'} component={PeopleDetail} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'DashboardReportDetail'} component={DashboardReportDetail} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'DashboardDrilldown'} component={DashboardDrilldown} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'PeopleDrilldown'} component={PeopleDrilldown} options={{ headerShown: false }}></Stack.Screen>
            <Stack.Screen name={'GroomingPictures'} component={GroomingPictures} options={{ headerShown: false }}></Stack.Screen>

            
            
        </Stack.Navigator>
    );
};

