import React, {useState} from 'react';
import { View, Text, Button, TextInput, } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import CounterScreen from './Counter';
import { CounterProvider } from './components/CounterContext'

import styles from './components/Styles';

import { RootState, AppDispatch, store } from './store/store';
import { increment, decrement } from './components/CounterSlice';
import { Provider, useDispatch, useSelector } from 'react-redux';

const CounterScreen2 = () => {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Számláló: {count}</Text>
      <Button title='Növelés' onPress={() => dispatch(increment())}></Button>
      <Button title='Csökkentés' onPress={() => dispatch(decrement())}></Button>
    </View>
  );
};

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }: any) => {
  const [userInput, setUserInput] = useState("");
    return (
    <View style={styles.container}>
      <Text style={styles.title}>Kezdőképernyő</Text>
      <TextInput
      style={styles.input}
      placeholder="Írj be valamit..."
      value={userInput}
      onChangeText={setUserInput}
      />
      <Button
      title="További részletekhez"
      onPress={() => navigation.navigate("Details", {text: userInput})}
      />
    </View>
 );
}

 const DetailsScreen = ({ route, navigation}: any)=> {
  const {text} = route.params;

  return(
    <View style={styles.container}>
      <Text style={styles.title}>Részletek képernyő</Text>
      <Text style={styles.text}>Beírt szöveg: {text}</Text>
      <Button title="Vissza" onPress={() => navigation.goBack()}/>
    </View>
  );
}



export default function Index() {
  { /*}
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Kezdőlap"}}/>
      <Stack.Screen name="Details" component={DetailsScreen} options={{ title: "Részletek"}}/>
    </Stack.Navigator>
  ); 
  */}
  {/*}
  return (
    <CounterProvider>
      <CounterScreen></CounterScreen>
    </CounterProvider>
  )
  */}

  return (
    <Provider store={store}>
      <CounterScreen2></CounterScreen2>
    </Provider>
  )
}