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';
import AccountHome from './screens/AccountHome';
import SearchProduct from './screens/SearchProduct';
import { FontAwesome } from '@expo/vector-icons';




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

    if (!isLoadingComplete) {
        return null;
    } else {
        return (
            <NavigationContainer>
                <AllPage />
            </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 = () => {
    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="productlist"
                component={TabTwoScreen}
                options={HeaderAllPageOpion}
            />
        </Stack.Navigator>
    );
}

const ProductDetailRec = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator initialRouteName="ProductDetail">
            <Stack.Screen
                name="ProductDetail"
                component={ProductDetail}
                options={({ navigation }) => ({
                    headerTitle: 'Danh sách sản phẩm',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

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

const ArticleHomePage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="articlehome"
                component={ArticleHome}
                options={HeaderAllPageOpion}
            />
        </Stack.Navigator>
    );
}

const ArticleListPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="articlelist"
                component={ArticleList}
                options={({ navigation }) => ({
                    headerTitle: 'Danh mục Tin tức',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const ArticleDetailPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="articledetail"
                component={ArticleDetail}
                options={({ navigation }) => ({
                    headerTitle: 'Chi tiết tin tức',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const LoginPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="login"
                component={Login}
                options={({ navigation }) => ({
                    headerTitle: 'Đăng nhập',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const RegisterPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="register"
                component={Register}
                options={({ navigation }) => ({
                    headerTitle: 'Đăng ký',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const ForgetPasswordPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="forgetpassword"
                component={ForgetPassword}
                options={({ navigation }) => ({
                    headerTitle: 'Quên mật khẩu',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const AboutUsPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="aboutus"
                component={AboutUs}
                options={({ navigation }) => ({
                    headerTitle: 'Giới thiệu',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const ContactUsPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="contactus"
                component={ContactUs}
                options={({ navigation }) => ({
                    headerTitle: 'Liên hệ',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const BuildPcPage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="buildpc"
                component={BuildPc}
                options={({ navigation }) => ({
                    headerTitle: 'Xây dựng cấu hình',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const AccountHomePage = ({ navigation }: { navigation: any }) => {
    return (
        <Stack.Navigator>
            <Stack.Screen
                name="accounthome"
                component={AccountHome}
                options={({ navigation }) => ({
                    headerTitle: 'Tài khoản',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    );
}

const AllPage = () => {
    return (
        <Stack.Navigator initialRouteName="homepage">
            <Stack.Screen
                name="homepage"
                component={MainContentRouter}
                options={{ headerShown: false }}
            />
            <Stack.Screen
                name="productlist"
                component={TabTwoScreen}
                options={({ navigation }) => ({
                    headerTitle: 'Danh mục sản phẩm',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="ProductDetail"
                component={ProductDetail}
                options={({ navigation }) => ({
                    headerTitle: 'Chi tiết sản phẩm',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="cart"
                component={CartDetail}
                options={({ navigation }) => ({
                    headerTitle: 'Giỏ hàng',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="articlehome"
                component={ArticleHome}
                options={({ navigation }) => ({
                    headerTitle: 'Tin tức',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="articlelist"
                component={ArticleList}
                options={({ navigation }) => ({
                    headerTitle: 'Danh sách tin tức',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="articledetail"
                component={ArticleDetail}
                options={({ navigation }) => ({
                    headerTitle: 'Chi tiết tin tức',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="login"
                component={Login}
                options={({ navigation }) => ({
                    headerTitle: 'Đăng nhập',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="register"
                component={Register}
                options={({ navigation }) => ({
                    headerTitle: 'Đăng ký',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="forgetpassword"
                component={ForgetPassword}
                options={({ navigation }) => ({
                    headerTitle: 'Quên mật khẩu',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="aboutus"
                component={AboutUs}
                options={({ navigation }) => ({
                    headerTitle: 'Giới thiệu',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="contactus"
                component={ContactUs}
                options={({ navigation }) => ({
                    headerTitle: 'Liên hệ',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="buildpc"
                component={BuildPc}
                options={({ navigation }) => ({
                    headerTitle: 'Xây dựng cấu hình',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="accounthome"
                component={AccountHome}
                options={({ navigation }) => ({
                    headerTitle: 'Tài khoản',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
            <Stack.Screen
                name="search"
                component={SearchProduct}
                options={({ navigation }) => ({
                    headerTitle: 'Tìm kiếm',
                    headerLeft: () => (
                        <TouchableOpacity style={styles.buttonGoBack} onPress={() => navigation.goBack()}>
                            <FontAwesome style={styles.buttonGoBackIcon} name="angle-left" />
                            <Text style={styles.buttonGoBackText}>Quay lại</Text>
                        </TouchableOpacity>
                    ),
                })}
            />
        </Stack.Navigator>
    )
}


const MainContentRouter = () => {
    return (
        <Drawer.Navigator initialRouteName="Trang chủ">
            <Drawer.Screen name="Trang chủ" component={HomePage} />
            <Drawer.Screen name="Giới thiệu" component={AboutUsPage} />
            <Drawer.Screen name="Laptop, Máy Tính Xách Tay" component={ProductList} />
            <Drawer.Screen name="Tin tức" component={ArticleHomePage} />
            <Drawer.Screen name="Tin khuyến mại" component={ArticleListPage} />
            <Drawer.Screen name="Đăng nhập" component={LoginPage} />
            <Drawer.Screen name="Đăng Ký" component={RegisterPage} />
            <Drawer.Screen name="Xây dựng cấu hình" component={BuildPcPage} />
            <Drawer.Screen name="Tài khoản" component={AccountHomePage} />
            <Drawer.Screen name="Liên hệ" component={ContactUsPage} />
        </Drawer.Navigator>
    );
}

const styles = StyleSheet.create({
    buttonGoBack: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 10,
    },
    buttonGoBackText: {
        fontSize: 16,
    },
    buttonGoBackIcon: {
        fontSize: 16,
        marginRight: 10,
    },
})