import React from 'react';
import { Tabs, useLocalSearchParams, useRouter } from 'expo-router';
import { useAuth } from '../../contexts/authcontext'; // Adjust path if needed
import { Button, useTheme, XStack, YStack, Paragraph } from 'tamagui';
import { PersonStanding, MessageCircle, LogOut, ArrowLeft, ArrowLeftFromLine } from '@tamagui/lucide-icons';

export default function ChatLayout() {
  const theme = useTheme();
  const { isLoggedIn } = useAuth(); // Ensure the isLoggedIn state is correctly being passed

  const router = useRouter();
  const contact = useLocalSearchParams(); // Get contactId from URL parameters
  const contactId = contact.friendUsername
  const goback = () => {
    router.replace("/contacts")
  }

  return (
    <Tabs
      screenOptions={{
        // Hide the tab bar for all screens in this layout
        tabBarStyle: {
          display: 'none', // This hides the tab bar entirely
        },
        // Enable dynamic header
        headerShown: true,
        headerStyle: {
          backgroundColor: theme.background.val,
          borderBottomColor: theme.borderColor.val,
        },
        headerTintColor: theme.color.val,
        // Set the header title based on the contactId from the URL
        title: contactId ? `Chat With ${contactId}` : 'Select a Contact', // Example dynamic title
        headerLeft: () => <XStack><Button icon={ArrowLeftFromLine} onPress={goback}></Button></XStack>,
      }}
    >
      
    </Tabs>
  );
}