import React, { useState } from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import UsersScreen from './screens/UsersScreen';
import PostsScreen from './screens/PostsScreen';
import TodosScreen from './screens/TodosScreen';
import { View, TextInput, StyleSheet } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const Tab = createBottomTabNavigator();

const DarkTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#ff00ff',
    background: '#000000',
    card: '#1a1a1a',
    text: '#ffffff',
    border: '#333333',
  },
};

export default function App() {
  const [filter, setFilter] = useState('');

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer theme={DarkTheme}>
      <View style={styles.container}>
        <TextInput
          style={styles.filter}
          placeholder="Globális szűrő"
          placeholderTextColor="#999999"
          value={filter}
          onChangeText={setFilter}
        />
        <Tab.Navigator>
          <Tab.Screen name="Users">{() => <UsersScreen filter={filter} />}</Tab.Screen>
          <Tab.Screen name="Posts">{() => <PostsScreen filter={filter} />}</Tab.Screen>
          <Tab.Screen name="Todos">{() => <TodosScreen filter={filter} />}</Tab.Screen>
        </Tab.Navigator>
      </View>
    </NavigationContainer>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000000' },
  filter: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#333333', marginTop: 40, backgroundColor: '#1a1a1a', color: '#ffffff' },
});