/* eslint-disable @typescript-eslint/no-explicit-any */
import React from "react";
import ReactDOM from "react-dom";
import styles from "../create-program-modal/modal.module.scss";
import { useForm, router } from "@inertiajs/react";

interface ModalProps {
  closeModal: () => void;
  type: "add" | "update";
  todo?: any;
  onSuccess?: (message: string) => void;
}

const CreateTodoModal: React.FC<ModalProps> = ({
  closeModal,
  type,
  todo,
}) => {
  // Let TypeScript infer types from initial data object
  const { data, setData, post, put, processing, errors, reset } = useForm({
    title: type === "update" ? todo?.title || "" : "",
    status: type === "update" ? todo?.status || "" : "",
  });

  const programStatus = [
    { id: 1, name: "completed" }, 
    { id: 2, name: "undone" }, 
  ]

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (type === "add") {
      post(route("program_store"), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
    } else if (type === "update" && todo?.id) {
      put(route("program_update", todo.id), {
        onSuccess: () => {
          reset();
          closeModal();
          router.reload({ only: ["flash"] });
        },
      });
    }
  };

  return ReactDOM.createPortal(
    <div className={styles.modal} onClick={closeModal}>
      <div
        className={styles["modal__content"]}
        onClick={(e) => e.stopPropagation()}
      >
        <div className={styles["modal__content--header"]}>
          <h2>
            {type === "add" ? "Create A Todo Item" : "Update Todo Item"}
          </h2>
          <p>
            {type === "add"
              ? "Easily create a todo item to orgranize your program"
              : "Update the selected todo item"}
          </p>
          <span onClick={closeModal}>Close</span>
        </div>

        <form onSubmit={handleSubmit} className={styles["modal__content--form"]}>
          <div className={styles["modal__content--form--group"]}>
            <label htmlFor="title">Enter todo *</label>
            <input
              id="title"
              type="text"
              placeholder="Ebenezer 2025"
              value={data.title}
              onChange={(e) => setData("title", e.target.value)}
              required
            />
            {errors.title && <small className={styles.error}>{errors.title}</small>}
          </div>

          <div className={styles["modal__content--form--group"]}>
            <label htmlFor="status">Choose status *</label>
            <select
              id="status"
              value={data.status}
              onChange={ (e) => setData("status", e.target.value) }
              required
            >
              <option value="" disabled>
                Please program status
              </option>
              {programStatus.map((status: any) => (
                <option key={status.id} value={status.name}>
                   {status.name.charAt(0).toUpperCase() + status.name.slice(1)}
                </option>
              ))}
            </select>
          </div>

          <button type="submit" disabled={processing}>
            {processing
              ? "Saving..."
              : type === "add"
              ? "Create A New Program"
              : "Updating Program"}
          </button>
        </form>
      </div>
    </div>,
    document.body
  );
};

export default CreateTodoModal;