import React, { useState, useEffect } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
import { useTailwind } from 'tailwind-rn';
import AsyncStorage from '@react-native-async-storage/async-storage';

function SettingsScreen({ navigation }) {
  const tailwind = useTailwind();
  const [apiEndpoint, setApiEndpoint] = useState('');

  useEffect(() => {
    const getAPI = async () => {
      const api = await AsyncStorage.getItem('apiEndpoint');
      setApiEndpoint(api || '');
      console.log(api)
    };

    getAPI();
  }, []);

  const handleLogout = async () => {
    await AsyncStorage.removeItem('token');
    await AsyncStorage.removeItem('userID');
    navigation.navigate('Login');
  };

  const handleSave = async () => {
    await AsyncStorage.setItem('apiEndpoint', apiEndpoint);
  };

  return (
    <View style={tailwind('p-4')}>
      <Text style={tailwind('text-lg')}>Settings</Text>
      <TextInput
        style={tailwind('border border-gray-500 mb-2')}
        value={apiEndpoint}
        onChangeText={text => setApiEndpoint(text)}
        placeholder="API endpoint"
      />
      <Button title="Save" onPress={handleSave} />
      <Button title="Logout" onPress={handleLogout} />
    </View>
  );
}

export default SettingsScreen;