/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import styles from "./checklist.module.scss";
import NoResults from "../no-results";
import { MdOutlineEditLocationAlt, MdDeleteForever } from "react-icons/md";
import CreateTodoModal from "../../modals/create-todo-modal";

const ProgramChecklist = ({ program }: any) => {
  const [todoModal, setTodoModal] = useState(false);

  const toggleTodoModal = () => setTodoModal(!todoModal);

  // Example todos
  const todos = [
    { id: 1, todo: "Repaint the church building", status: "pending" },
    { id: 2, todo: "Arrange hotel accommodations for invited ministers", status: "done" },
    { id: 3, todo: "Hire a big stage for presentation", status: "pending" },
  ];

  const handleEdit = () => alert("Edit clicked");
  const handleDelete = () => alert("Delete clicked");

  return (
    <>
      {todoModal && <CreateTodoModal type="add" closeModal={toggleTodoModal} todo={{}} />}

      <div className={styles.checklist}>
        {/* Header */}
        <div className={styles.header}>
          <div className={styles.headerText}>
            <h1>Project Checklist</h1>
            <p>List, visualize, and manage all the vital points for the program’s success.</p>
          </div>
          <button onClick={toggleTodoModal}>Add Todo</button>
        </div>

        {/* Todos */}
        <div className={styles.items}>
          {todos.length > 0 ? (
            todos.map((todo: any) => (
              <div key={todo.id} className={styles.item}>
                <span className={styles.todoText}>{todo.todo}</span>
                <span
                  className={
                    todo.status === "done" ? styles.statusDone : styles.statusPending
                  }
                >
                  {todo.status}
                </span>
                <div className={styles.buttons}>
                  <MdOutlineEditLocationAlt
                    onClick={handleEdit}
                    size={20}
                    color="#22C55E"
                    className={styles.icon}
                  />
                  <MdDeleteForever
                    onClick={handleDelete}
                    size={20}
                    color="#EF4444"
                    className={styles.icon}
                  />
                </div>
              </div>
            ))
          ) : (
            <NoResults title="No Todos" remark="You are yet to add any todos" />
          )}
        </div>
      </div>
    </>
  );
};

export default ProgramChecklist;