CityExplorer/app/(tabs)/add.jsx

import { useState } from "react";
import {
  StyleSheet,
  Platform,
  KeyboardAvoidingView,
  ScrollView,
  Image,
} from "react-native";
import { TextInput, Button, Snackbar } from "react-native-paper";
import { requestCameraPermissionsAsync, launchCameraAsync } from 'expo-image-picker';
import useLocationStore from "@/locationStore";

export default function FormScreen() {
  const [formData, setFormData] = useState({
    name: "",
    description: "",
    image: "",
    area: 0,
    population: 0,
  });
  const [message, setMessage] = useState("");
  const [visible, setVisible] = useState(false);
  const [picture, setPicture] = useState(null);

  const addLocation = useLocationStore((state) => state.addLocation);

  const handleAddLocation = async () => {
    if (
      formData.name &&
      formData.description &&
      formData.image &&
      formData.area &&
      formData.population
    ) {
      const newLocation = {
        id: Date.now(),
        name: formData.name,
        description: formData.description,
        image: formData.image,
        area: parseFloat(formData.area),
        population: parseInt(formData.population),
      };

      const added = await addLocation(newLocation);
      setFormData({
        name: "",
        description: "",
        image: "",
        area: 0,
        population: 0,
      });
      if (added != null) {
        setMessage("Lokalizacja została dodana!");
        setVisible(true);
      } else {
        setMessage("Wystąpił błąd podczas dodawania lokalizacji!");
        setVisible(true);
      }
    } else {
      setMessage("Wypełnij wszystkie pola!");
      setVisible(true);
    }
  };

  const takePicture = async () => {
    const {status} = await requestCameraPermissionsAsync();
    if (status !== 'granted') {
      return;
    }
    const result = await launchCameraAsync({
      allowsEditing: false,
    });

    if (!result.canceled && result.assets && result.assets.length > 0) {
      setPicture(result.assets[0].uri);
    }
  }

  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"
          placeholder="Wpisz link do zdjęcia"
          multiline={true}
          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}
          keyboardType="numeric"
          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={handleAddLocation}
        >
          Dodaj
        </Button>
        <Button onPress={takePicture} style={{ margin: 10, width: "100%" }} icon="plus-circle-outline" mode={"contained"}>
          Zrób zdjęcie
        </Button>
        {picture && (
            <Image
                source={{ uri: picture.uri }}
                style={styles.image}
            />
        )}
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#25292e",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  image: {
    width: 100,
    height: 100,
    borderStyle: "solid",
    borderColor: "#fff",
    borderWidth: 1,
  },
});