import { Tabs, useNavigation } from 'expo-router';
import React, { useEffect } from 'react';

import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import LoginCheck from '@/components/lib/Login';
import AsyncStorage from '@react-native-async-storage/async-storage';

import { addStorage, cfg } from '@/components/lib/cfg';
import { DB } from '@/components/lib/db';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  useEffect(()=>{
    (async function(){
      let negara = await DB(`SELECT id, name->>'id_ID' AS name FROM res_country `);
      let perusahaan = await DB(`SELECT id,name FROM res_company `);
      await addStorage('perusahaan', perusahaan)
      await addStorage('negara', negara)
      cfg.dataPilihan.negara = negara;
      cfg.dataPilihan.perusahaan = perusahaan;
    })();
  },[])

  const CekLogin = async (name:any) => {
    let cekLogin = await AsyncStorage.getItem('login');
    if (cekLogin === null && name != 'index') {
      if (name == 'signup') {
        navigation.navigate(name);
      } else {
        navigation.navigate('index'); // Navigate to the index tab if cekLogin is null
      }
      return true;
    } else if (cekLogin !== null && name === 'index') {
      navigation.navigate('home')
    }
  }

  const navigation = useNavigation<{ navigate: (screen: string) => void }>(); // Explicitly type navigation
  return (
    <Tabs
      
      screenOptions={{
        
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        
      }}
      screenListeners={{
        focus : (e)=>{
          let data = e.target?.split('-') || []
          if (data[0]) {
            let name = data[0];
            console.log(name);
            (function(){
              CekLogin(name);
              cfg.activeTabs = name;
              cfg.call(name);
              return true;
            })();
          }
        },
        
      }}
      >
      
      <Tabs.Screen
        name="index"
        options={{
          title: 'Login',
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      
      <Tabs.Screen
        name="signup"
        options={{
          title: 'Register',
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />

      <Tabs.Screen
        name="home"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />

      <Tabs.Screen
        name="setting"
        options={{
          title: 'Setting',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="order"
        options={{
          title: 'Order',
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="history"
        options={{
          title: 'history',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="dashboard"
        options={{
          title: 'dashboard',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="stock"
        options={{
          title: 'stock',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="customer"
        options={{
          title: 'customer',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="detailcontact"
        options={{
          title: 'detailcontact',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="singleedit"
        options={{
          title: 'singleedit',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="formcustomer"
        options={{
          title: 'formcustomer',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="pelunasan"
        options={{
          title: 'formcustomer',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="orderlunas"
        options={{
          title: 'formcustomer',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
      <Tabs.Screen
        name="orderbelumlunas"
        options={{
          title: 'formcustomer',
          tabBarIcon: ({ color, focused }) => (
            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
          ),
          tabBarStyle: { display: 'none' },
          tabBarButton: () => null,
        }}
      />
    </Tabs>
  );
}