import {StyleSheet, Text, View, ImageBackground, Linking, Image} from 'react-native';
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import HomeScreen from "../HomeScreen/HomeScreen";
import BoxScreen from "../BoxScreen/BoxScreen";
import BarcodeScreen from "../BarcodeScreen/BarcodeScreen";
import MoneyScreen from "../MoneyScreen/MoneyScreen";
import ProfileScreen from "../ProfileScreen/ProfileScreen";
import {NavigationContainer} from "@react-navigation/native";
import moneyScreen from "../MoneyScreen/MoneyScreen";
import profileScreen from "../ProfileScreen/ProfileScreen";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {RFPercentage} from "react-native-responsive-fontsize";
import LoginScreen from "../LoginScreen/LoginScreen";
import OrderScreen from "../OrderScreen/OrderScreen";
import OrdersScreen from "../OrdersScreen/OrdersScreen";


interface CustomTabProps {
    name: string;
    component: React.ComponentType<any>;
    icon: any;
}

const CustomTab = ({name, component, icon}: CustomTabProps) => ({
    name,
    component,
    options: {
        tabBarIcon: ({focused, color, size}: { focused: boolean; color: string; size: number }) => (
            <Image
                source={icon}
                style={{
                    width: RFPercentage(4),
                    height: RFPercentage(4),
                    tintColor: color
                }}
            />
        ),
        tabBarLabel: () => null,
    }
});

function MainScreen() {
    const Tab = createBottomTabNavigator();

    const tabScreens = [
        {
            name: "Home",
            component: OrderScreen,
            icon: require('assets/icons/home.png')
        },
        {
            name: "Box",
            component: OrdersScreen,
            icon: require('assets/icons/box.png')
        },
        {
            name: "Barcode",
            component: BarcodeScreen,
            icon: require('assets/icons/barcode.png')
        },
        {
            name: "Money",
            component: moneyScreen,
            icon: require('assets/icons/money.png')
        },
        {
            name: "Profile",
            component: profileScreen,
            icon: require('assets/icons/profile.png')
        }
    ];

    return (
        <NavigationContainer>

            <Tab.Navigator screenOptions={{
                tabBarStyle: styles.tabBarStyle,
                headerTitle: ""
            }}>
                {tabScreens.map(tabScreen =>
                    <Tab.Screen key={tabScreen.name} {...CustomTab({
                        name: tabScreen.name,
                        component: tabScreen.component,
                        icon: tabScreen.icon,
                    })}/>
                )}
            </Tab.Navigator>
        </NavigationContainer>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabBarStyle: {
        position: 'absolute',
        left: responsiveWidth(10),
        right: responsiveWidth(10),
        bottom: 0,
        borderTopLeftRadius: 18,
        borderTopRightRadius: 18,
        elevation: 10,
        height: responsiveHeight(8),
        paddingHorizontal: responsiveWidth(5)
    }

})
export default MainScreen;