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';
import ArticleHome from './screens/ArticleHome';
import ArticleList from './screens/ArticleList';
import ArticleDetail from './screens/ArticleDetail';
import Login from './screens/Login';
import Register from './screens/Register';
import ForgetPassword from './screens/ForgetPassword';
import AboutUs from './screens/AboutUs';
import ContactUs from './screens/ContactUs';
import BuildPc from './screens/BuildPc';




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 ArticleHomePage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="homepage"
                component={ArticleHome}
                options={HeaderAllPageOpion}
            />
        </Stack.Navigator>
    );
}

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

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

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

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

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

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

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

const BuildPcPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="homepage"
                component={BuildPc}
                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.Screen name="Tin tức" component={ArticleHomePage} />
            <Drawer.Screen name="Tin khuyến mại" component={ArticleListPage} />
            <Drawer.Screen name="Chi tiết tin" component={ArticleDetailPage} />
            <Drawer.Screen name="Đăng nhập" component={LoginPage} />
            <Drawer.Screen name="Đăng Ký" component={RegisterPage} />
            <Drawer.Screen name="Quên mật khẩu" component={ForgetPasswordPage} />
            <Drawer.Screen name="Giới thiệu" component={AboutUsPage} />
            <Drawer.Screen name="Liên hệ" component={ContactUsPage} />
            <Drawer.Screen name="Xây dựng cấu hình" component={BuildPcPage} />
        </Drawer.Navigator>
    );
}