import {Redirect} from 'expo-router'
import {NativeTabs} from 'expo-router/unstable-native-tabs'

import {useNotificationObserver} from '@/lib/notifications'
import {useAuth} from '@/stores/auth'

export default function AppGroupLayout() {
  const user = useAuth((s) => s.user)
  useNotificationObserver()

  if (user === undefined) return null
  if (user === null) return <Redirect href="/sign-in" />

  return (
    <NativeTabs>
      <NativeTabs.Trigger name="(home)">
        <NativeTabs.Trigger.Icon sf="house.fill" />
        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="search" role="search">
        <NativeTabs.Trigger.Icon sf="magnifyingglass" />
        <NativeTabs.Trigger.Label>Search</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
      <NativeTabs.Trigger name="you">
        <NativeTabs.Trigger.Icon sf="person.crop.circle.fill" />
        <NativeTabs.Trigger.Label>You</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  )
}
