import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import GrowthMonitoringHomeScreen from './GrowthMonitoringHomeScreen'; // Ensure the right import path
import SplashScreen from './SplashScreen';
import GrowthScreen from './GrowthMonitoringComponent';
import PredictOrder from './PredictOrder';
import MonitorGrowth from './MonitorGrowth';

const Stack = createStackNavigator();

export default function App() {
  const [isLoading, setIsLoading] = useState(true);
  const [isShowingAppName, setIsShowingAppName] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
      setIsShowingAppName(true);

      setTimeout(() => {
        setIsShowingAppName(false);
      }, 4000); // Show app name for 4s
    }, 5000); // Show splash for 5s
  }, []);

  if (isLoading) {
    return <SplashScreen isShowingAppName={false} />;
  }

  if (isShowingAppName) {
    return <SplashScreen isShowingAppName={true} />;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: {
            // backgroundColor: '#1faa1f', // Set the navigation bar color
            backgroundColor: '#7aae64'
            // borderBottomWidth: 2, // Add border to the bottom of the header
            // borderBottomColor: 'black',
          },
          headerTintColor: 'black', // Set the text color in navigation bar
          headerTitleStyle: {
            fontSize: 24, // Increase the font size of header text
            fontWeight: 'bold', // Make the header text bold
          },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="GrowthMonitoringHome" component={GrowthMonitoringHomeScreen} options={{ headerShown: false }} />
        {/* <Stack.Screen name="GrowthMonitoringForm" component={GrowthScreen} options={{ headerShown: false }} /> */}
        <Stack.Screen name="PredictOrder" component={PredictOrder} options={{ headerShown: false }} />
        <Stack.Screen name="MonitorGrowth" component={MonitorGrowth} options={{ headerShown: false }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
