import { ChangeEvent, FormEvent, useEffect, useState } from "react";
import Swal from "sweetalert2";
import UseFullScreenLoader from "../../../../hooks/UseFullScreenLoader";
import { getFileExtension } from "../../../../hooks/useGetExtension";
import {
  useDeleteDocument,
  useGetUploadedResumes,
  useUploadResume,
} from "../../../../utils/hooks";
import InfiniteScroll from "react-infinite-scroll-component";
import { Oval } from "react-loader-spinner";
import { useRouter } from "next/router";

// validation checking
function checkFileTypes(file: File | null): boolean {
  const allowedTypes = [
    "application/pdf",
    "application/msword",
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  ];
  if (!file) {
    return false;
  }
  return allowedTypes.includes(file.type);
}

const CvUploader: React.FC = () => {
  const [title, setTitle] = useState<string>("");
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [getError, setError] = useState<string>("");
  const [getLoading, setLoading] = useState(false);
  const [uploadedResumes, setUploadedResumes] = useState<UploadedDocResp[]>([]);
  const [errors, setErrors] = useState<string>("");
  const [pageInfo, setPageInfo] = useState<string | null>("/?page=1");
  const router = useRouter();
  const cvManagerHandler = async (e: ChangeEvent<HTMLInputElement>) => {
    const data = e.target.files;
    setSelectedFile(data ? data[0] : null);
  };
  const handleDelete = async (id: number) => {
    try {
      const result = await Swal.fire({
        title: "Delete File",
        text: "Are you sure?",
        icon: "warning",
        confirmButtonColor: "#055875",
        iconColor: "#055875",
        showCancelButton: true,
        cancelButtonText: "Cancel",
        confirmButtonText: "Delete",
      });
      if (result.isConfirmed) {
        setLoading(true);
        const { resp, status } = (await useDeleteDocument(id)) as Response;
        console.log("File deleted successfully:", resp, "Status:", status);
      }
    } catch (error) {
      console.error("Error deleting file:", error);
    } finally {
      router.reload();
    }
  };
  useEffect(() => {
    if (selectedFile !== null) {
      if (checkFileTypes(selectedFile)) {
        setError("");
      } else {
        setError("Only accept (.doc, .docx, .pdf) file");
      }
    }
  }, [selectedFile]);

  const handleUploadResume = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (getError !== "") {
      setSelectedFile(null);
      setTitle("");
    } else {
      setLoading(true);
      if (title.split(" ").length > 5) {
        setLoading(false);
        await Swal.fire({
          title: "Failure!",
          text: "Title too long, Please try again!",
          icon: "warning",
          confirmButtonColor: "#055875",
          iconColor: "#055875",
        });
        return;
      }
      try {
        const { resp, status } = (await useUploadResume(
          (selectedFile ? selectedFile : null) as File,
          title
        )) as Response;
        console.log("File uploaded successfully:", resp, "Status:", status);
        setLoading(false);
        if (status == 200) {
          await Swal.fire({
            title: "Success!",
            text: "Document Uploaded Successfully!",
            icon: "success",
            confirmButtonColor: "#055875",
            iconColor: "#055875",
          });
          router.reload();
        } else {
          await Swal.fire({
            title: "Failure!",
            text: "Something went wrong, Please try again!",
            icon: "warning",
            confirmButtonColor: "#055875",
            iconColor: "#055875",
          });
        }
      } catch (error) {
        setLoading(false);
        console.error("Error uploading file:", error);
        setError("Failed to upload the file");
      } finally {
        setSelectedFile(null);
        setTitle("");
      }
    }
  };

  useEffect(() => {
    getUploadedFiles();
  }, []);

  const getUploadedFiles = async () => {
    setLoading(true);
    try {
      const uploadedDocs = (await useGetUploadedResumes(
        pageInfo!
      )) as DocResponse;
      const filterResumes = uploadedDocs.data.filter(
        (doc) => doc.documentTypeId == 1
      );
      setUploadedResumes([...uploadedResumes!, ...filterResumes]);
      setPageInfo(uploadedDocs?.meta?.nextPageUrl);
      console.log("uploadedDocs==>>", uploadedDocs);
    } catch (error) {
      console.log("Error fetching uploaded documents:", error);
    } finally {
      setLoading(false);
    }
  };
  const handleClick = (fileUrl: string) => {
    // URL of the document or any other resource you want to open

    // Open a new window with specified settings
    window.open(
      "/cv-viewer?fileUrl=" + encodeURIComponent(fileUrl),
      "_blank",
      "width=800,height=600"
    );
  };

  const downloadFile = (url: string, filename: string) => {
    fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/${url}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/pdf",
      },
    })
      .then((response) => response.blob())
      .then((blob) => {
        const blobURL = window.URL.createObjectURL(blob);
        const anchor = document.createElement("a");
        anchor.href = blobURL;
        anchor.setAttribute("download", filename);
        document.body.appendChild(anchor);
        anchor.click();
        document.body.removeChild(anchor);
        window.URL.revokeObjectURL(blobURL); // Free up memory
      })
      .catch((error) => console.error("Error downloading the file:", error));
  };

  return (
    <>
      {getLoading && <UseFullScreenLoader text="Please Hang On..." />}
      <div className="widget-content">
        <form method="POST" onSubmit={handleUploadResume}>
          <div className="form-group">
            <label>Enter Title</label>
            <input
              type="text"
              placeholder="Enter Title"
              required
              onChange={(e) => {
                const title = e.target.value;
                const titleWords = title.split(" ");
                const titleHasNumbers = titleWords.some((word) =>
                  /\d/.test(word)
                );

                if (titleWords.length > 5 || titleHasNumbers) {
                  setErrors(
                    "Title should not be more than 5 words and should not contain numbers"
                  );
                } else {
                  setErrors("");
                  setTitle(title);
                }
              }}
              value={title}
            />
            {errors && <p className="text-danger">{errors}</p>}
          </div>

          <div className="uploading-resume">
            <div className="uploadButton">
              <input
                className="uploadButton-input"
                type="file"
                name="attachments"
                accept=".doc,.docx,application/msword,application/pdf"
                id="upload"
                onChange={cvManagerHandler}
              />
              <label className="cv-uploadButton" htmlFor="upload">
                <span className="title">Click here to upload</span>
                <span className="text">
                  To upload file size is (Max 5Mb) and allowed file types are
                  (.doc, .docx, .pdf)
                </span>
                <span>{selectedFile?.name}</span>
                <span className="theme-btn btn-style-one">Upload Resume</span>
                {getError !== "" ? (
                  <p className="ui-danger mb-0">{getError}</p>
                ) : undefined}
              </label>
              <span className="uploadButton-file-name"></span>
            </div>
          </div>

          <div className="form-group d-flex justify-content-center align-items-center">
            <button
              className={`theme-btn btn-style-one mb-0  ${getError !== "" ? "opacity-50 cursor-not-allowed" : ""}`}
              type="submit"
              disabled={getError !== "" || selectedFile === null}
            >
              Submit
            </button>
          </div>
        </form>
        {/* Start resume Preview */}
        <div>
          <label className="my-3">Uploaded Resumes</label>

          {uploadedResumes && (
            <InfiniteScroll
              dataLength={uploadedResumes!.length}
              next={getUploadedFiles}
              hasMore={pageInfo !== null}
              // scrollableTarget="scrollable_div"
              loader={
                <div className="d-flex justify-content-center py-4">
                  <Oval
                    visible={true}
                    height="40"
                    width="40"
                    color="#055875"
                    secondaryColor="#055875c2"
                    ariaLabel="oval-loading"
                  />
                </div>
              }
              endMessage={
                <p style={{ textAlign: "center" }}>
                  <b>Yay! You have seen it all</b>
                </p>
              }
            >
              <div className="files-outer">
                {uploadedResumes?.map((uploadedDoc) => (
                  <div
                    className="file-edit-box "
                    style={{
                      backgroundImage: `url(${getFileExtension(uploadedDoc.files[0]?.url! as string) !== ".pdf" ? "/images/doc.png" : "/images/pdf.png"})`,
                      backgroundSize: "contain",
                      backgroundRepeat: "no-repeat",
                      backgroundPosition: "center",
                    }}
                  >
                    <div className="cv-inner-overlay"></div>
                    <div className="cv-box-content">
                      <span className="title px-4 docTitle">
                        {uploadedDoc.title}
                      </span>
                      <div className="edit-btns">
                        <a
                          onClick={() => handleClick(uploadedDoc.files[0]?.url)}
                          target="_blank"
                        >
                          <button>
                            <span className="la la-eye"></span>
                          </button>
                        </a>

                        <button onClick={() => handleDelete(uploadedDoc.id)}>
                          <span className="la la-trash"></span>
                        </button>

                        <button
                          onClick={() =>
                            downloadFile(
                              uploadedDoc.files[0]?.path,
                              `jobrator_${uploadedDoc.title?.replace(" ", "_")}`
                            )
                          }
                        >
                          <span className="la la-download"></span>
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </InfiniteScroll>
          )}
          {/* End resume Preview */}
        </div>
      </div>
    </>
  );
};

export default CvUploader;