import React, { useState } from "react";
import Modal from "react-bootstrap/Modal";
import Loader from "../../Loader/Loader";
import axios from "axios";
import { toast } from "react-toastify";
import { useRouter } from "next/router";

interface AddModalProps {
  val: boolean;
  onRequestClose: () => void;
  isEditModal: boolean;
  data: {
    name?: string;
    id?: number | string;
    active?: boolean;
    [key: string]: any;
  };
}

interface FormDataState {
  name?: string;
  degree_id?: number | string;
  status?: boolean;
  [key: string]: any;
}

interface ErrorsState {
  [key: string]: string;
}

const AddModal: React.FC<AddModalProps> = ({ val, onRequestClose, isEditModal, data }) => {
  const [show, setShow] = useState<boolean>(val);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [errors, setErrors] = useState<ErrorsState>({});
  const [formData, setFormData] = useState<FormDataState>({
    name: data?.name,
    degree_id: data?.id,
    status: data?.active,
  });
  const router = useRouter();

  const handleClose = () => {
    setShow(false);
    onRequestClose();
  };
  const checkValid = (name: any, value: string) => {
    if (value === "") {
      setErrors((errors) => {
        return { ...errors, [name]: "This field is required" };
      });
      return false;
    } else {
      setErrors((errors) => {
        return { ...errors, [name]: "" };
      });
      return true;
    }
  };

  const handleValidation = (e: any) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
    checkValid(name, value);
  };
  const handleSingleChange = (selectOption: { value: any; }, name: any) => {
    setFormData({ ...formData, [name]: selectOption?.value });
  };

  const saveSubmit = async (e: { preventDefault: () => void; }) => {
    e.preventDefault();
    var check = false;
    var elements: any = document?.getElementById("form01");
    for (var i = 0, element; (element = elements[i++]); ) {
      if (element.name in FormData) {
        check = checkValid(element.name, element.value);
        if (check === false) {
          break;
        }
      }
    }
    // console.log(errors)
    if (check) {
      setIsLoading(true);
      const body = new FormData();

      if (isEditModal && formData.degree_id !== undefined && formData.degree_id !== null) {
        body.append("id", String(formData.degree_id));
      }
      body.append("name", formData.name ?? "");
      body.append("active", String(formData.status ?? ""));
      const token = localStorage.getItem("token");
      const url = `${
        process.env.NEXT_PUBLIC_API_ENDPOINT
      }admin/masters/degree/${isEditModal ? "update" : "create"}`;

      try {
        const response = await axios.post(url, body, {
          headers: {
            Authorization: "Bearer " + token,
          },
        });

        setIsLoading(false);

        if (response.status === 200) {
          if (response.data.status) {
            toast.success(response.data.message, {
              position: "top-right",
              autoClose: 3000,
            });
            handleClose();
            // console.log(response.data)
            //   if(response.data && response.data.data)
            //   UpdateProfile(response.data.data)
            //   NextTab(next,2)
          } else {
            toast.warning(response.data.message, {
              position: "top-right",
              autoClose: 3000,
            });
          }
        } else if (response.status === 401) {
          localStorage.removeItem("token");
          localStorage.removeItem("userData");
          router.push("/");
        } else {
          toast.warning("An error occurred while creating the faq.", {
            position: "top-right",
            autoClose: 3000,
          });
        }
      } catch (error: any) {
        setIsLoading(false);
        if (error.response) {
          if (error.response.status === 401) {
            localStorage.removeItem("token");
            localStorage.removeItem("userData");
            router.push("/");
          } else if (error.response.status === 404) {
            toast.warning("Resource not found", {
              position: "top-right",
              autoClose: 3000,
            });
          } else if (error.response.status === 500) {
            toast.warning("Internal server error", {
              position: "top-right",
              autoClose: 3000,
            });
          } else {
            toast.warning("An error occurred", {
              position: "top-right",
              autoClose: 3000,
            });
          }
        } else {
          // Handle other types of errors here (e.g., network errors)
          toast.warning("An error occurred", {
            position: "top-right",
            autoClose: 3000,
          });
        }
      }
    }
  };

  return (
    <>
      <Modal show={show} onHide={onRequestClose} size="lg" centered>
        <Modal.Header>
          <h5 className="modal-title" id="exampleModalLabel">
            {isEditModal ? "Add Exam" : "Edit Exam"}
          </h5>
          <button type="button" className="close" onClick={onRequestClose}>
            <span aria-hidden="true">×</span>
          </button>
        </Modal.Header>
        <Modal.Body>
          {isLoading && <Loader />}
          {/* <div className="card mb-4">
            <div className="card-body"> */}
          <form id="form01">
            <div className="row">
              <div className="col-md-12 form-group mb-3">
                <label htmlFor="firstName1">Exam Name</label>
                <input
                  value={formData.name}
                  className={
                    errors && errors.name
                      ? "form-control is-invalid"
                      : "form-control"
                  }
                  name="name"
                  onChange={handleValidation}
                  type="text"
                  placeholder="Exam Name"
                />
                {errors.name && (
                  <div className="error-message">{errors.name}</div>
                )}
              </div>
              <div className="col-md-6 form-group mb-3">
                <label htmlFor="firstName1">Exam Level</label>
                <select
                  onChange={handleValidation}
                  className={
                    errors && errors.name
                      ? "form-control is-invalid"
                      : "form-control"
                  }
                  name="status"
                //   value={formData?.status}
                >
                  <option value={2}>Beginnar Levels</option>
                  <option value={1}>All Levels</option>
                  <option value={0}>Advanced Levels</option>
                </select>
                {errors.status && (
                  <div className="error-message">{errors.status}</div>
                )}
              </div>
              <div className="col-md-6 form-group mb-3">
                <label htmlFor="firstName1">Mark</label>
                <input
                  value={formData.name}
                  className={
                    errors && errors.name
                      ? "form-control is-invalid"
                      : "form-control"
                  }
                  name="name"
                  onChange={handleValidation}
                  type="text"
                  placeholder="Mark"
                />
                {errors.name && (
                  <div className="error-message">{errors.name}</div>
                )}
              </div>
              <div className="col-md-6 form-group mb-3">
                <label htmlFor="firstName1">Hors</label>
                <input
                  value={formData.name}
                  className={
                    errors && errors.name
                      ? "form-control is-invalid"
                      : "form-control"
                  }
                  name="name"
                  onChange={handleValidation}
                  type="text"
                  placeholder="Hours"
                />
                {errors.name && (
                  <div className="error-message">{errors.name}</div>
                )}
              </div>
              <div className="col-md-6 form-group mb-3">
                <label htmlFor="firstName1">Exam Fee</label>
                <input
                  value={formData.name}
                  className={
                    errors && errors.name
                      ? "form-control is-invalid"
                      : "form-control"
                  }
                  name="name"
                  onChange={handleValidation}
                  type="text"
                  placeholder="Exam Fee"
                />
                {errors.name && (
                  <div className="error-message">{errors.name}</div>
                )}
              </div>
              <div className="col-md-6 form-group mb-3">
                <label htmlFor="firstName1">Exam Date</label>
                <input
                  value={formData.name}
                  className={
                    errors && errors.name
                      ? "form-control is-invalid"
                      : "form-control"
                  }
                  name="name"
                  onChange={handleValidation}
                  type="date"
                  placeholder="Exam Date"
                />
                {errors.name && (
                  <div className="error-message">{errors.name}</div>
                )}
              </div>
              <div className="col-md-6 form-group mb-3">
                <label htmlFor="firstName1">Status</label>
                <select
                  onChange={handleValidation}
                  className={
                    errors && errors.name
                      ? "form-control is-invalid"
                      : "form-control"
                  }
                  name="status"
                //   value={formData?.status}
                >
                  <option value={1}>Active</option>
                  <option value={0}>Inactive</option>
                </select>
                {errors.status && (
                  <div className="error-message">{errors.status}</div>
                )}
              </div>
              <div className="col-md-12 text-end">
                <button
                  className="btn btn-primary"
                  type="button"
                  onClick={saveSubmit}
                >
                  {isEditModal ? "Submit" : "Save"}
                </button>
              </div>
            </div>
          </form>
        </Modal.Body>
        {/* <Modal.Footer></Modal.Footer> */}
      </Modal>
    </>
  );
};

export default AddModal;