import React, {useEffect, useContext, useState} from 'react';
import {FormContext} from "../../../core/context";

export default function Todo(props) {
    const { todos, setTodos, deleteTodo, onEditSubmit, editContent, setEditContent} = useContext(FormContext);
    const [isEditing, setIsEditing] = useState(false);

    useEffect(() => {

    }, [isEditing])

    return (
        <div className={todoCard(props.todo)} id="todo-card">
            <div className="card-body d-flex align-items-center">
                <input type="checkbox" className="mx-2"
                       onChange={() => props.toggleCompleted(props.index)}
                       checked={props.todo.isCompleted}/><span className={props.todo.isCompleted ? 'line-through mr-auto': 'mr-auto'}>{props.todo.content}</span>
                <i className={editIcon()} id="edit" onClick={(e) => editTodo(e)}></i>
                <i onClick={() => deleteTodo(props.todo.id)} className="fa fa-trash-o fa-lg" id="trash-o"></i>
            </div>

            <div style={{display: 'none'}} className='card-footer m-0 p-0 justify-content-center'>
                <form className="p-2 d-flex" onSubmit={(e) => onEditSubmit(e, props.todo.id)}>
                    <input type="text" className="form-control mx-2" onChange={(e) => setEditContent(e.target.value)} />
                    <input type="submit" value="Submit" className="btn btn-warning"/>
                </form>
            </div>
        </div>
    );

    function editIcon() {
        let baseline = 'fa fa-pencil-square-o mx-3';
        if (isEditing) baseline += 'editing';
        return baseline;
    }

    function editTodo(e) {
       const cardFooter = e.target.parentElement.parentElement.childNodes[1];
        cardFooter.style.display === 'none' ? cardFooter.style.display = 'flex': cardFooter.style.display = 'none';
    }

    function todoCard(item) {
        let className = 'card';
        if (item.isFound) className += 'text-white bg-info';
        return className;
    }
}

在editTodo（）函数的第一行，我选择了我试图编辑的todo的确切实例的卡页脚。 我想知道这样做（函数的第一行）是否有任何替代方案。 因为如果我的元素嵌套得很深，那么选择同级节点将是一件痛苦的事。