import { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput,  Button } from 'react-native-paper';
import { locations } from '@/data/locations';


export default function FormScreen() {
  const [formData, setFormData] = useState({
    name: '',
    description: '',
    image: '',
    area: '',
    population: '',
  });

  const [location, setLocation] = useState(locations.sort((a, b) => b.id - a.id));

  const addLocation = () => {
    console.log(formData);
    if(formData.name && formData.description && formData.image && formData.area && formData.population) {
      const newLocation = {
        id: locations.length > 0 ? locations[0].id + 1 : 0,
        name: formData.name,
        description: formData.description,
        image: formData.image,
        area: formData.area,
        population: formData.population,
      };

      setLocation([newLocation, ...location]);
      
      locations.push(newLocation);

      setFormData({
        name: '',
        description: '',
        image: '',
        area: '',
        population: '',
      });
    }
    }

  

  return (
    <View style={styles.container}>
        <TextInput
          mode="outlined"
          label="Nazwa"
          placeholder="Wpisz nazwa"
          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"
          style={{ margin: 10, width: '100%', borderRadius:10}}
          value={formData.image}
          onChangeText={e => setFormData({ ...formData, image: e })}
          />
        <TextInput
          mode="outlined"
          label="Powierzchnia"
          placeholder="Wpisz powierzchnie"
          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}
          onChangeText={e => setFormData({ ...formData, population: e })}
        />
        
          <Button 
          style={{ margin: 10, width: '100%' }}
          icon="plus-circle-outline"
          mode={'contained'}
          onPress={addLocation}
          >Dodaj</Button>
      </View>
  );
}

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