Source: componenets/TodoItem.js

'use client'

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FaEdit, FaTrash } from 'react-icons/fa'; 
import { FaSave, FaTimes } from 'react-icons/fa';


/**
 * Component for displaying and managing a single todo item.
  * @module TodoItem
 * @param {Object} props - The properties passed to the component.
 * @param {Object} props.task - The task object containing details of the todo item.
 * @param {number} props.task.item_id - The unique identifier of the todo item.
 * @param {string} props.task.description - The description of the todo item.
 * @param {boolean} props.task.completed - The completion status of the todo item.
 * @param {Function} props.deleteTask - Function to delete the todo item.
 * @param {Function} props.editTask - Function to edit the todo item.
 * @param {Function} props.toggleTaskCompletion - Function to toggle the completion status of the todo item.
 * @returns {JSX.Element} The JSX element representing the TodoItem component.
 */

function TodoItem({ task, deleteTask, editTask, toggleTaskCompletion }) {
  const [editing, setEditing] = useState(false);
  const [editedText, setEditedText] = useState(task.description);
  const [showMenu, setShowMenu] = useState(false);

   /**
   * Handles initiating the editing mode for the todo item.
   * @returns {void}
   */
  const handleEdit = () => {
    setEditing(true);
    setShowMenu(false);
  };

   /**
   * Handles saving the changes made to the todo item.
   * @returns {void}
   */
  const handleSave = () => {
    editTask(task.item_id, editedText); 
    setEditing(false);
  };
 /**
   * Handles canceling the editing process and reverting changes.
   * @returns {void}
   */
  const handleCancel = () => {
    setEditedText(task.description);
    setEditing(false);
  };
 /**
   * Handles changes in the edited text input field.
   * @param {Event} e - The event object.
   * @returns {void}
   */
  
  const handleInputChange = (e) => {
    setEditedText(e.target.value);
  };

/**
   * Handles deleting the todo item.
   * @returns {void}
   */
  const handleDelete = () => {
    deleteTask(task.item_id); 
  };
 /**
   * Handles toggling the completion status of the todo item.
   * @returns {void}
   */
  const handleCompletionToggle = () => {
    toggleTaskCompletion(task.item_id);
  };

  return (
    <div className={`todo-item ${task.completed ? 'completed' : ''}`}>
         <div className="completion-toggle">
        <input
          type="radio"
          checked={task.completed}
          onChange={handleCompletionToggle}
        />
      </div>
      <div className="task-description">
        {editing ? (
          <div>
            <input
              type="text"
              value={editedText}
              onChange={handleInputChange}
            />
            <button className="save-btn" onClick={handleSave}><FaSave /></button>
            <button className="cancel-btn" onClick={handleCancel}><FaTimes /></button>
          </div>
        ) : (
          <div>
            <h4 >{task.description}</h4>
          </div>
        )}
      </div>
      <div className="menu">
        <button onClick={() => setShowMenu(!showMenu)}>...</button>
        {showMenu && (
          <div className="menu-options">
            <div>
              <button onClick={handleEdit}><FaEdit /></button>
            </div>
            <div>
              <button onClick={handleDelete}><FaTrash /></button>
            </div>
          </div>
        )}
      </div>
  
    </div>
  );
}

/**
 * Validates the props passed to the LocalTodoItem component.
 * @type {Object}
 */TodoItem.propTypes = {
  task: PropTypes.shape({
    item_id: PropTypes.number.isRequired,
    description: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
  }).isRequired,
  deleteTask: PropTypes.func.isRequired,
  editTask: PropTypes.func.isRequired,
  toggleTaskCompletion: PropTypes.func.isRequired
};

export default TodoItem;