import React, { useEffect, useState } from "react";
import { FormSubmitHandler, useForm } from "react-hook-form";
import { useUpdateInterviewForReschedule } from "../../../../utils/hooks";
import { useFormatDateTime } from "../../../../hooks/useFormatDateTime";
import Swal from "sweetalert2";
import UseFullScreenLoader from "../../../../hooks/UseFullScreenLoader";
import { useRouter } from "next/router";

interface Props {
  name: string;
  index: number;
  interviewId: number;
  interviewLink: string;
}
const RescheduleInterviewModal = ({
  name,
  index,
  interviewId,
  interviewLink,
}: Props) => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const [getInterviewId, setInterviewId] = useState<number>();
  const [getLoading, setLoading] = useState<boolean>(false);
  const router = useRouter();

  useEffect(() => {
    setInterviewId(interviewId);
  }, []);
  const rescheduleInterviewSubmit = async (data: any) => {
    try {
      setLoading(true);
      const { resp, status } = (await useUpdateInterviewForReschedule(
        getInterviewId!,
        useFormatDateTime(data.rescheduleInterviewDate),
        data.rescheduleInterviewLink
      )) as InterviewRescheduleResp;
      setLoading(false);

      if (status === 200) {
        const ok = await Swal.fire({
          title: "Success",
          text: "Interview Reschedule Requested Successfully",
          icon: "success",
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Ok",
        });
        if (ok.isConfirmed) {
          router.reload();
        }
      } else {
        await Swal.fire({
          title: "Warning",
          text: "Interview Reschedule Request Failed",
          icon: "warning",
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Ok",
        });
      }
    } catch (error) {
      setLoading(false);
      await Swal.fire({
        title: "Failed",
        text: "Something went wrong",
        icon: "error",
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Ok",
      });
    }
  };
  return (
    <>
      {getLoading && <UseFullScreenLoader text={"Rescheduling Interview"} />}
      <div
        className="modal fade"
        id={`ratingModal${index}`}
        tabIndex={-1}
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-lg">
          <div className="modal-content">
            <form
              className="default-form w-100 mt-4"
              onSubmit={handleSubmit(rescheduleInterviewSubmit)}
            >
              <div className="modal-header">
                <button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div className="modal-body">
                <div className="solutions_feedback d-flex flex-column align-items-center">
                  <h3 className="text-center">
                    Request for reschedule this interview from{" "}
                    <span className="text-theme-light-color">{name}</span> now
                  </h3>
                  <div className="row align-items-center justify-content-center w-100">
                    {/* <div className="col-md-8 mt-4">
                      <div className="form-group">
                        <input
                          type="text"
                          placeholder="Enter the Interview Link Here"
                          value= {interviewLink}
                          className="d-block w-100"
                          {...register("rescheduleInterviewLink", {
                            required: true,
                            disabled: true,
                            pattern:
                              /^(https?|ftp):\/\/(([a-z\d]([a-z\d-]*[a-z\d])?\.)+[a-z]{2,}|localhost)(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i,
                          })}
                        />
                        {errors.rescheduleInterviewLink &&
                          errors.rescheduleInterviewLink.type ===
                            "required" && (
                            <span className="text-danger">
                              This field is required
                            </span>
                          )}
                        {errors.rescheduleInterviewLink &&
                          errors.rescheduleInterviewLink.type === "pattern" && (
                            <span className="text-danger">
                              Please enter a valid link
                            </span>
                          )}
                      </div>
                    </div> */}
                    <div className="form-group mt-4 col-md-4">
                      <input
                        type="datetime-local"
                        className="form-control"
                        id="rescheduleInterviewDate"
                        min={new Date().toISOString().slice(0, 16)}
                        {...register("rescheduleInterviewDate", {
                          required: "This field is required",
                          validate: {
                            futureDate: (value) =>
                              new Date(value) > new Date() ||
                              "Date must be in the future",
                          },
                        })}
                      />
                      {/* Error message */}
                      {errors.rescheduleInterviewDate && (
                        <p className="text-danger">
                          {errors.rescheduleInterviewDate.message as string}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              </div>
              <div className="modal-footer">
                <button type="submit" className="hc_button_when_bg_white">
                  Submit
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default RescheduleInterviewModal;