CityExplorer/app/location/edit/[id].jsx

import { useState, useEffect } from 'react';
import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView, View, ActivityIndicator } from 'react-native';
import { TextInput, Button, Snackbar, useTheme } from 'react-native-paper';
import { useLocalSearchParams, useRouter } from 'expo-router';
import { getLocation, updateLocation } from '@/api/locations';

export default function EditLocation() {
  const theme = useTheme();
  const { id } = useLocalSearchParams();
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    image: '',
    area: '',
    population: '',
  });

  const [message, setMessage] = useState('');
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const fetchLocation = async () => {
      try {
        const data = await getLocation(id)

        if (data) {
          setFormData({
            name: data.name,
            description: data.description,
            image: data.image,
            area: data.area.toString(),
            population: data.population.toString(),
          });
        }
      } catch (error) {
        console.error("Error fetching location:", error);
      } finally {
        setLoading(false);
      }
    }
    fetchLocation();
  }, [id]);

  const handleEditLocation = () => {
    if (
      formData.name &&
      formData.description &&
      formData.image &&
      formData.area &&
      formData.population
    ) {
      const response = updateLocation(id, {
        name: formData.name,
        description: formData.description,
        image: formData.image,
        area: parseFloat(formData.area),
        population: parseInt(formData.population, 10),
      });

      if (response) {
        setMessage('Lokalizacja została zaktualizowana!');
        setVisible(true);
        while (router.canGoBack()) { // Pop from stack until one element is left
          router.back();
        }
        router.replace("/"); // Replace the last remaining stack element
      } else {
        setMessage('Wystąpił błąd podczas aktualizacji lokalizacji!');
        setVisible(true);
      }
    } else {
      setMessage('Wypełnij wszystkie pola!');
      setVisible(true);
    }
  };

  if (loading) {
    return (
      <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
        <ActivityIndicator size="large" color={theme.colors.primary} />
      </View>
    );
  }

  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView contentContainerStyle={styles.container}>
        <Snackbar
          visible={visible}
          onDismiss={() => setVisible(false)}
          duration={3000}
        >
          {message}
        </Snackbar>
        <TextInput
          mode="outlined"
          label="Nazwa"
          placeholder="Wpisz nazwę"
          style={{ margin: 10, width: '100%' }}
          value={formData.name}
          onChangeText={(e) => setFormData({ ...formData, name: e })}
        />
        <TextInput
          mode="outlined"
          label="Opis"
          placeholder="Wpisz opis"
          style={{ margin: 10, width: '100%' }}
          multiline={true}
          value={formData.description}
          onChangeText={(e) => setFormData({ ...formData, description: e })}
        />
        <TextInput
          mode="outlined"
          label="Link do zdjęcia"
          multiline={true}
          placeholder="Wpisz link do zdjęcia"
          style={{ margin: 10, width: '100%' }}
          value={formData.image}
          onChangeText={(e) => setFormData({ ...formData, image: e })}
        />
        <TextInput
          mode="outlined"
          label="Powierzchnia"
          placeholder="Wpisz powierzchnię"
          style={{ margin: 10, width: '100%' }}
          value={formData.area}
          onChangeText={(e) => setFormData({ ...formData, area: e })}
        />
        <TextInput
          mode="outlined"
          label="Ludność"
          placeholder="Wpisz liczbę ludności"
          style={{ margin: 10, width: '100%' }}
          value={formData.population}
          keyboardType="numeric"
          onChangeText={(e) => setFormData({ ...formData, population: e })}
        />
        <Button
          style={{ margin: 10, width: '100%' }}
          icon="plus-circle-outline"
          mode={'contained'}
          onPress={handleEditLocation}
        >
          Edytuj
        </Button>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#25292e',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
});