import React from "react";
import {StyleSheet, View, TouchableOpacity, Text} from "react-native";
import {Ionicons} from "@expo/vector-icons";
import moment from "moment";
import {useDB} from "../context/DBcontex";

function Todo({item, color, listId}) {

    const {deleteTodo, toggleTodoCompleted} = useDB()

    const onDelete = async () => {
        await deleteTodo(listId, item)
    }

    const toggleCompleted = async () => {
        await toggleTodoCompleted(listId, item)
    }

    return (
        <View style={[styles.container, {backgroundColor: color}]}>
            <View style={{flexDirection: 'row'}}>
                <TouchableOpacity style={{alignItems: 'center', justifyContent: 'center'}}
                                  onPress={() => toggleCompleted()}>
                    <Ionicons name={item.completed ? "ios-square" : "ios-square-outline"} size={41} color="#47dbb9"/>
                </TouchableOpacity>
                <View style={styles.todoInfo}>
                    <Text
                        style={[styles.todoTitle, {textDecorationLine: item.completed ? 'line-through' : 'none'}]}>
                        {item.title}
                    </Text>
                    <Text style={styles.todoDate}>{moment(item.createdAt.toDate()).calendar()}</Text>
                </View>
                <TouchableOpacity style={{
                    alignItems: 'center',
                    justifyContent: 'center'
                }} onPress={() => onDelete()}
                >
                    <Ionicons name="trash-outline" size={41} color="#fb634c"/>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        marginVertical: 10,
        borderRadius: 10,
        padding: 5,

    },
    todoTitle: {
        fontSize: 22,
        flex: 1,
        alignSelf: 'center'
    },
    todoDate: {
        flex: 1,
        alignSelf: 'center',
        fontSize: 10,
        color: 'white'
    },
    todoInfo: {
        flex: 1,
        justifyContent: 'space-between',
        paddingVertical: 5,
    }
});

export default Todo;