import { Redirect, SplashScreen, Tabs } from 'expo-router';
import React, { useCallback, useEffect, useState } from 'react';
import {
  Feed as FeedIcon,
  Settings as SettingsIcon,
  Style as StyleIcon,
} from '@/components/ui/icons';
import { useAuth, useIsFirstTime } from '@/lib';
import BottomNavigation from '@/library/bottom-navigation';
import {
  DocumentOff,
  DocumentOn,
  HomeOff,
  HomeOn,
  MyPageOff,
  MyPageOn,
} from '@/components/ui/testicons';

type NavigationConfigType = {
  [key: string]: {
    active: React.ReactNode;
    inactive: React.ReactNode;
    title: string;
    order: number;
    badge?: {
      variant: 'dot' | 'new' | 'number';
      count?: number;
    };
  };
};

export default function TabLayout() {
  const status = useAuth.use.status();
  const [isFirstTime] = useIsFirstTime();

  const hideSplash = useCallback(async () => {
    await SplashScreen.hideAsync();
  }, []);

  useEffect(() => {
    if (status !== 'idle') {
      setTimeout(() => {
        hideSplash();
      }, 1000);
    }
  }, [hideSplash, status]);

  const [navigationConfig, setNavigationConfig] =
    useState<NavigationConfigType>({
      index: {
        active: <HomeOn />,
        inactive: <HomeOff />,
        title: '홈',
        order: 4,
        // badge: { variant: 'dot' },
      },
      temp: {
        active: <HomeOn />,
        inactive: <HomeOff />,
        title: '임시',
        order: 3,
        // badge: { variant: 'number', count: 5 },
      },
      paper: {
        active: <HomeOn />,
        inactive: <HomeOff />,
        title: '서류',
        order: 0,
        // badge: { variant: 'new' },
      },
      style: {
        active: <DocumentOn />,
        inactive: <DocumentOff />,
        title: '스타일',
        order: 1,
      },
      settings: {
        active: <MyPageOn />,
        inactive: <MyPageOff />,
        title: '설정',
        order: 2,
      },
    });

  // if (isFirstTime) {
  //   return <Redirect href="/onboarding" />;
  // }
  // if (status === 'signOut') {
  //   return <Redirect href="/login" />;
  // }

  return (
    <Tabs
      screenOptions={{
        headerShown: false,
      }}
      tabBar={(props) => (
        <BottomNavigation {...props} config={navigationConfig} divider />
      )}
    />
  );
}