/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from "./attend-item.module.scss";
import { BsEye } from "react-icons/bs";
import { MdOutlineEditLocationAlt, MdDeleteForever } from "react-icons/md";
import { useState } from "react";
import DeleteModal from "../../modals/delete-modal";
import CreateAttendanceModal from "../../modals/create-attendance-modal";

interface AttendanceProps {
  attendance: any;
}

const AttendanceItem: React.FC<AttendanceProps> = ({ attendance }) => {
  const { date, confirmed_by, service, count } = attendance;

  const [deleteModal, setDeleteModal] = useState(false);
  const [updateModal, setUpdateModal] = useState(false);

  const toggleDeleteModal = () => setDeleteModal((prev) => !prev);
  const toggleUpdateModal = () => setUpdateModal((prev) => !prev);

  return (
    <>
      {/* ✅ Delete Confirmation Modal */}
      {deleteModal && <DeleteModal deleteUrl="" closeModal={toggleDeleteModal} />}

      {/* ✅ Update Attendance Modal (now passes attendance) */}
      {updateModal && (
        <CreateAttendanceModal
          type="update"
          closeModal={toggleUpdateModal}
          attendance={attendance} 
        />
      )}

      <div className={styles["attend__item"]}>
        <span>{date}</span>
        <span>{confirmed_by}</span>
        <span>{service}</span>
        <span>{Number(count).toLocaleString("en-US")}</span>
        <span className={styles["attend__item--actions"]}>
          <BsEye style={{ cursor: "pointer" }} size="1.3rem" color="#60A5FA" />
          <MdOutlineEditLocationAlt
            onClick={toggleUpdateModal}
            style={{ cursor: "pointer" }}
            size="1.3rem"
            color="#22C55E"
          />
          <MdDeleteForever
            onClick={toggleDeleteModal}
            style={{ cursor: "pointer" }}
            size="1.3rem"
            color="#EF4444"
          />
        </span>
      </div>
    </>
  );
};

export default AttendanceItem;