import { useState, useEffect } from 'react';
import { StyleSheet, Platform, ScrollView, KeyboardAvoidingView } from 'react-native';
import { TextInput,  Button, Snackbar } from 'react-native-paper';
import { locations } from '@/data/locations';
import { useLocalSearchParams, useRouter } from 'expo-router';

export default function edit() {
    const { id } = useLocalSearchParams();
    const router = useRouter();
    const locationData = locations.find(loc => loc.id == id);
    const [formData, setFormData] = useState({
      name: '',
      description: '',
      image: '',
      area: '',
      population: '',
    });

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

    useEffect(() => {
      if (locationData) {
        console.log(locationData);
        setFormData({
          name: locationData.name,
          description: locationData.description,
          image: locationData.image,
          area: locationData.area.toString(),
          population: locationData.population.toString(),
        });
      }
    }, [locationData]);


    const editLocation = () => {
      if (
        formData.name &&
        formData.description &&
        formData.image &&
        formData.area &&
        formData.population
      ) {
        const index = locations.findIndex((loc) => loc.id == id);
        if (index !== -1) {
          locations[index] = { ...locations[index], ...formData };
          setMessage('Lokalizacja została zaktualizowana!');
          setVisible(true);
        }else{ 
          setMessage('Błąd spróbuj ponownie póżniej!');
          setVisible(true);
        }
      } else{
        setMessage('Wypełnij wszystkie pola!');
        setVisible(true);
      }
    };

  

  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 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"
          multiline={true}
          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}
          keyboardType='numeric'
          onChangeText={e => setFormData({ ...formData, population: e })}
        />
        
          <Button 
          style={{ margin: 10, width: '100%' }}
          icon="plus-circle-outline"
          mode={'contained'}
          onPress={editLocation}
          >Edytuj</Button>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

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