/* eslint-disable react/no-unstable-nested-components */
import { Link, Redirect, SplashScreen, Tabs } from 'expo-router'
import React, { useCallback, useEffect } from 'react'

import { useAuth } from '@/core'
import { Pressable, Text } from '@/ui'
import { Feed as FeedIcon, Settings as SettingsIcon, Style as StyleIcon } from '@/ui/icons'

export default function TabLayout() {
  const status = useAuth.use.status()
  const userSession = useAuth.use.userSession()

  const hideSplash = useCallback(async () => {
    await SplashScreen.hideAsync()
  }, [])
  useEffect(() => {
    if (status !== 'loading') {
      setTimeout(() => {
        hideSplash()
      }, 1000)
    }
  }, [hideSplash, status])

  if (!userSession?.isRegistered) {
    return <Redirect href="/register" />
  }

  if (status === 'unauthenticated') {
    return <Redirect href="/login" />
  }

  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Feed',
          tabBarIcon: ({ color }) => <FeedIcon color={color} />,
          headerRight: () => <CreateNewPostLink />,
          tabBarTestID: 'feed-tab',
        }}
      />

      <Tabs.Screen
        name="style"
        options={{
          title: 'Style',
          headerShown: false,
          tabBarIcon: ({ color }) => <StyleIcon color={color} />,
          tabBarTestID: 'style-tab',
        }}
      />
      <Tabs.Screen
        name="settings"
        options={{
          title: 'Settings',
          headerShown: false,
          tabBarIcon: ({ color }) => <SettingsIcon color={color} />,
          tabBarTestID: 'settings-tab',
        }}
      />
    </Tabs>
  )
}

const CreateNewPostLink = () => {
  return (
    <Link href="/feed/add-post" asChild>
      <Pressable>
        <Text className="px-3 text-primary-300">Create</Text>
      </Pressable>
    </Link>
  )
}