import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Alert, Button, Image, StyleSheet, Dimensions, SafeAreaView, ScrollView, TouchableOpacity } from 'react-native';
import { Header, MainSeach } from './components/header/headerMain';

import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';
import { createDrawerNavigator, DrawerItemList, DrawerItem, DrawerContentScrollView } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
import { Text, View, } from './components/Themed';
import TabOneScreen from './screens/TabOneScreen';
import TabTwoScreen from './screens/TabTwoScreen';
import ProductDetail from './screens/ProductDetail';
import CartDetail from './screens/Cart';

export default function App() {
    const isLoadingComplete = useCachedResources();
    const colorScheme = useColorScheme();

    if (!isLoadingComplete) {
        return null;
    } else {
        return (
            <NavigationContainer>
                <MainContentRouter />
            </NavigationContainer>

        );
    }
}


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

/* cài đặt thông số cho header */
const HeaderAllPageOpion = ({ navigation }: { navigation: any }) => {
    return (
        {
            headerLeft: () => (
                <Header props={navigation} />
            ),
            headerTitle: () => (
                <Text></Text>
            ),
            headerStyle: {
                backgroundColor: '#3385ff',
                height: 130,
            }
        }
    )
}

/* redirect về trang chủ */
const HomePage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="homepage"
                component={TabOneScreen}
                options={HeaderAllPageOpion}
            />
        </Stack.Navigator>
    );
}

/* redirect về danh mục */
const ProductList = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="homepage"
                component={TabTwoScreen}
                options={HeaderAllPageOpion}
            />
        </Stack.Navigator>
    );
}

const ProductDetailRec = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="homepage"
                component={ProductDetail}
                options={HeaderAllPageOpion}
            />
        </Stack.Navigator>
    );
}

const CartPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="homepage"
                component={CartDetail}
                options={HeaderAllPageOpion}
            />
        </Stack.Navigator>
    );
}

const MainContentRouter = () => {
    return (
        <Drawer.Navigator>
            <Drawer.Screen name="Home" component={HomePage} />
            <Drawer.Screen name="Laptop, Máy Tính Xách Tay" component={ProductList} />
            <Drawer.Screen name="Trang san pham" component={ProductDetailRec} />
            <Drawer.Screen name="cart" component={CartPage} />
        </Drawer.Navigator>
    );
}