import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
import { BottomTabParamList, TabOneParamList, TabTwoParamList } from '../types';
import { Text, View } from '../components/Themed';

import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import HomePage from '../screens/HomePage';
import ProductList from '../screens/ProductList';
import MenuCategory from '../screens/MenuCategory';
import ProductDetail from '../screens/ProductDetail';
import { HeaderHome, HeaderCategory, HeaderProductDetail } from '../components/header/HeaderAllPage'


const BottomTab = createBottomTabNavigator();
export default function BottomTabNavigator() {
    const colorScheme = useColorScheme();
    return (
        <BottomTab.Navigator
            initialRouteName="Trang chủ"
            tabBarOptions={{ activeTintColor: '#D8262F' }}>
            <BottomTab.Screen
                name="Trang chủ"
                component={AllStackNavigation}
                options={{
                    tabBarIcon: ({ color }) => <TabBarIcon name="home-outline" color={color} />,
                }}
            />
            <BottomTab.Screen
                name="Danh mục"
                component={MenuNavigation}
                options={{
                    tabBarIcon: ({ color }) => <TabBarIcon name="apps-outline" color={color} />,
                }}
            />
            <BottomTab.Screen
                name="Giỏ hàng"
                component={ProductListNavigator}
                options={{
                    tabBarIcon: ({ color }) => <TabBarIcon name="cart-outline" color={color} />,
                }}
            />
            <BottomTab.Screen
                name="Chat"
                component={ProductListNavigator}
                options={{
                    tabBarIcon: ({ color }) => <TabBarIcon name="chatbubble-ellipses-outline" color={color} />,
                }}
            />
            <BottomTab.Screen
                name="Tài khoản"
                component={ProductListNavigator}
                options={{
                    tabBarIcon: ({ color }) => <TabBarIcon name="person-outline" color={color} />,
                }}
            />
        </BottomTab.Navigator>
    );
}

// You can explore the built-in icon families and icons on the web at:
// https://icons.expo.fyi/
function TabBarIcon(props: { name: React.ComponentProps<typeof Ionicons>['name']; color: string }) {
    return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
}

// Each tab has its own navigation stack, you can read more about this pattern here:
// https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
const HomepageStack = createStackNavigator<TabOneParamList>();

function HomePageNavigator({ navigation }: { navigation: any }) {
    return (
        <HomepageStack.Navigator>
            <HomepageStack.Screen
                name="HomePage"
                component={HomePage}
                options={{
                    headerTitle: '',
                    headerLeft: () => (
                        <HeaderHome />
                    ),
                    headerStyle: {
                        backgroundColor: '#fff',
                        height: 100,
                    }
                }}
            />
        </HomepageStack.Navigator>
    );
}

const MenuStack = createStackNavigator();

function MenuNavigation() {
    return (
        <MenuStack.Navigator>
            <MenuStack.Screen
                name="Menu"
                component={MenuCategory}
                options={{
                    headerTitle: 'Tất cả danh mục',
                    headerTintColor: '#fff',
                    headerStyle: {
                        backgroundColor: '#D8262F',
                        height: 80,
                    }
                }}
            />
        </MenuStack.Navigator>
    );
}

const ProductListStack = createStackNavigator<TabTwoParamList>();

function ProductListNavigator() {
    return (
        <ProductListStack.Navigator>
            <ProductListStack.Screen
                name="ProductList"
                component={ProductList}
                options={{
                    headerTitle: '',
                    headerLeft: () => (
                        <HeaderCategory />
                    ),
                    headerStyle: {
                        backgroundColor: '#fff',
                        height: 100,
                    }
                }}
            />
        </ProductListStack.Navigator>
    );
}

const ProductDetailStack = createStackNavigator();

function ProductDetailNavigation() {
    return (
        <ProductDetailStack.Navigator>
            <ProductDetailStack.Screen
                name="ProductDetail"
                component={ProductDetail}
                options={{
                    headerTitle: '',
                    headerLeft: () => (
                        <HeaderProductDetail />
                    ),
                    headerStyle: {
                        backgroundColor: '#fff',
                        height: 80,
                    }
                }}
            />
        </ProductDetailStack.Navigator>
    );
}

const AllStack = createStackNavigator();
function AllStackNavigation() {
    return (
        <AllStack.Navigator initialRouteName="Home">
            <AllStack.Screen
                name="Home"
                component={HomePageNavigator}
                options={{ headerShown: false }}
            />
            <AllStack.Screen
                name="Menu"
                component={MenuNavigation}
                options={{ headerShown: false }}
            />
            <AllStack.Screen
                name="ProductCategory"
                component={ProductListNavigator}
                options={{ headerShown: false }}
            />
            <AllStack.Screen
                name="ProductDetail"
                component={ProductDetailNavigation}
                options={{ headerShown: false }}
            />
        </AllStack.Navigator>
    );
}