import { Colors } from '@/constants/theme';
import { useAuth } from '@/utils/auth';
import { BlurView } from 'expo-blur';
import { Image } from 'expo-image';
import { router, Tabs } from 'expo-router';
import React, { useEffect } from 'react';
import { Platform, View } from 'react-native';
export default function TabLayout() {
  const { authStatus } = useAuth();

  useEffect(() => {
    if (authStatus === 'fail') {
      router.push('/sign-in');
    }
  }, [authStatus]);


  return authStatus === 'auth' &&

    <Tabs screenOptions={{
      headerShown: false,
      tabBarActiveTintColor: Colors.tint,
      tabBarStyle: { position: 'absolute' },
      tabBarBackground: () => Platform.OS === 'ios' ? <BlurView tint='light' style={{ flex: 1 }} /> : <View style={{ flex: 1, backgroundColor: 'rgba(255, 255, 255, 0.9)' }} />,
      lazy: true
    }}>
      <Tabs.Screen
        name="index"
        options={{
          title: '首页',
          tabBarIcon: ({ color }) => <Image style={{ width: 24, height: 24 }} tintColor={color} source={require('@/assets/images/tabIcons/home.png')} />
        }}
      />
      <Tabs.Screen
        name="customer"
        options={{
          title: '客户',
          tabBarIcon: ({ color }) => <Image style={{ width: 24, height: 24 }} tintColor={color} source={require('@/assets/images/tabIcons/explore.png')} />
        }}
      />
      <Tabs.Screen
        name="analytics"
        options={{
          title: '分析',
          tabBarIcon: ({ color }) => <Image style={{ width: 24, height: 24 }} tintColor={color} source={require('@/assets/images/tabIcons/explore.png')} />
        }}
      />
      <Tabs.Screen
        name="reports"
        options={{
          title: '报告',
          tabBarIcon: ({ color }) => <Image style={{ width: 24, height: 24 }} tintColor={color} source={require('@/assets/images/tabIcons/explore.png')} />
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: '我的',
          tabBarIcon: ({ color }) => <Image style={{ width: 24, height: 24 }} source={require('@/assets/images/tabIcons/explore.png')} />
        }}
      />
    </Tabs>;
}
