Untitled

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, FlatList, StyleSheet, TouchableOpacity, Modal } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import { format, differenceInDays } from 'date-fns';

const TodoApp = () => {
  const [todos, setTodos] = useState([]);
  const [description, setDescription] = useState('');
  const [date, setDate] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currentTodo, setCurrentTodo] = useState(null);

  useEffect(() => {
    const sortedTodos = [...todos].sort((a, b) => new Date(a.date) - new Date(b.date));
    setTodos(sortedTodos);
  }, [todos]);

  const addTodo = () => {
    if (description && date) {
      setTodos([...todos, { description, date, completed: false }]);
      setDescription('');
      setDate(new Date());
    }
  };

  const editTodo = (index) => {
    setCurrentTodo({ ...todos[index], index });
    setDescription(todos[index].description);
    setDate(new Date(todos[index].date));
    setIsModalVisible(true);
  };

  const saveTodo = () => {
    const updatedTodos = [...todos];
    updatedTodos[currentTodo.index] = { ...currentTodo, description, date };
    setTodos(updatedTodos);
    setIsModalVisible(false);
    setDescription('');
    setDate(new Date());
  };

  const toggleComplete = (index) => {
    const updatedTodos = [...todos];
    updatedTodos[index].completed = !updatedTodos[index].completed;
    setTodos(updatedTodos);
  };

  const renderItem = ({ item, index }) => {
    const daysLeft = differenceInDays(new Date(item.date), new Date());
    const isClose = daysLeft <= 3;

    return (
      <View style={[styles.todoItem, isClose && styles.closeDeadline, item.completed && styles.completed]}>
        <Text>{item.description}</Text>
        <Text>{format(new Date(item.date), 'yyyy-MM-dd')}</Text>
        <View style={styles.icons}>
          <TouchableOpacity onPress={() => editTodo(index)}>
            <Text style={styles.icon}>✏️</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => toggleComplete(index)}>
            <Text style={styles.icon}>{item.completed ? '✅' : '⬜'}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Description"
        value={description}
        onChangeText={setDescription}
      />
      <TouchableOpacity onPress={() => setShowDatePicker(true)}>
        <TextInput
          style={styles.input}
          placeholder="Select Date"
          value={format(date, 'yyyy-MM-dd')}
          editable={false}
        />
      </TouchableOpacity>
      {showDatePicker && (
        <DateTimePicker
          value={date}
          mode="date"
          display="default"
          onChange={(event, selectedDate) => {
            setShowDatePicker(false);
            if (selectedDate) {
              setDate(selectedDate);
            }
          }}
        />
      )}
      <TouchableOpacity style={styles.button} onPress={addTodo}>
        <Text style={styles.buttonText}>Add Todo</Text>
      </TouchableOpacity>
      <FlatList
        data={todos}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
        style={styles.todoList}
      />
      <Modal visible={isModalVisible} animationType="slide">
        <View style={styles.modalContent}>
          <TextInput
            style={styles.input}
            placeholder="Description"
            value={description}
            onChangeText={setDescription}
          />
          <TouchableOpacity onPress={() => setShowDatePicker(true)}>
            <TextInput
              style={styles.input}
              placeholder="Select Date"
              value={format(date, 'yyyy-MM-dd')}
              editable={false}
            />
          </TouchableOpacity>
          {showDatePicker && (
            <DateTimePicker
              value={date}
              mode="date"
              display="default"
              onChange={(event, selectedDate) => {
                setShowDatePicker(false);
                if (selectedDate) {
                  setDate(selectedDate);
                }
              }}
            />
          )}
          <TouchableOpacity style={styles.button} onPress={saveTodo}>
            <Text style={styles.buttonText}>Save</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button} onPress={() => setIsModalVisible(false)}>
            <Text style={styles.buttonText}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    borderRadius: 10,
  },
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 10,
    alignItems: 'center',
    marginVertical: 10,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
  todoList: {
    marginTop: 20,
  },
  todoItem: {
    padding: 15,
    marginVertical: 5,
    backgroundColor: '#fff',
    borderRadius: 10,
    borderWidth: 2,
    borderColor: 'blue',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  closeDeadline: {
    borderColor: 'red',
  },
  completed: {
    textDecorationLine: 'line-through',
  },
  icons: {
    flexDirection: 'row',
  },
  icon: {
    marginLeft: 10,
    fontSize: 18,
  },
  modalContent: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
});

export default TodoApp;