import {StyleSheet, Text, View, ImageBackground, Image} from 'react-native';
import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
import BarcodeScreen from "../BarcodeScreen/BarcodeScreen";
import {DefaultTheme, 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 OrderScreen, {OrderScreenController} from "../OrderScreen/OrderScreen";
import OrdersScreen from "../OrdersScreen/OrdersScreen";
import {background} from "../../css/colors";
import * as fs from "fs";

export  type TabNavigatorParamList = {
    Home: undefined;
    Box: undefined;
    Barcode: undefined;
    Money: undefined;
    Profile: undefined;
};

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

const CustomTab = ({name, component, icon, hidden}: 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: CustomTabProps[] = [
        {
            name: "Home",
            component: OrderScreenController,
            icon: require('assets/icons/home.png'),
            hidden: false
        },
        {
            name: "Box",
            component: OrdersScreen,
            icon: require('assets/icons/box.png'),
            hidden: false
        },
        {
            name: "Barcode",
            component: BarcodeScreen,
            icon: require('assets/icons/barcode.png'),
            hidden: false
        },
        {
            name: "Money",
            component: moneyScreen,
            icon: require('assets/icons/money.png'),
            hidden: false
        },
        {
            name: "Profile",
            component: profileScreen,
            icon: require('assets/icons/profile.png'),
            hidden: false
        }
    ];

    return (
        <NavigationContainer theme={{
            ...DefaultTheme,
            colors: {
                ...DefaultTheme.colors,
                background: background,
                card: background
            },
        }}>

            <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,
                        hidden: tabScreen.hidden,
                    })}/>
                )}
            </Tab.Navigator>
        </NavigationContainer>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,


    },
    tabBarStyle: {
        position: 'absolute',
        left: responsiveWidth(10),
        right: responsiveWidth(10),
        bottom: 0,
        borderTopLeftRadius: RFPercentage(3),
        borderTopRightRadius: RFPercentage(3),
        elevation: 10,
        height: responsiveHeight(8),
        paddingHorizontal: responsiveWidth(5),
        backgroundColor: "white",
    }

})
export default MainScreen;