import Link from "next/link.js";
import { useRouter } from "next/navigation";
import { Dispatch, SetStateAction } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { Oval } from "react-loader-spinner";
import Swal from "sweetalert2";
import { SavedJobsData } from "../../../..";
import { useFormatDate } from "../../../../hooks/useFormatDate";
import { useDeleteSavedJob } from "../../../../utils/hooks/useDeleteSavedJob";

interface SavedJobsTable {
  jobs: SavedJobsData[];
  loading: boolean;
  handleClearAll: () => void;
  // sortOrder: string;
  // setSortOrder: Dispatch<SetStateAction<string>>;
  sortAndFilterOptions: SortAndFilterOptionsTypesForSavedJobs;
  // setPageInfo: Dispatch<SetStateAction<string | null>>;
  pageInfo: string | null;
  getSavedJobs: () => void;
  handleSortChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  handleDateRangeChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  clearAllStateDisabled: boolean;
}

const SavedJobsTable: React.FC<SavedJobsTable> = ({
  jobs,
  loading,
  handleClearAll,
  // sortOrder,
  // setSortOrder,
  sortAndFilterOptions,
  // setPageInfo,
  pageInfo,
  getSavedJobs,
  handleDateRangeChange,
  handleSortChange,
}) => {
  const router = useRouter();
  const handleDelete = async (jobId: number) => {
    try {
      Swal.fire({
        title: "Delete Saved Job",
        text: "Are you sure?",
        icon: "warning",
        confirmButtonColor: "#055875",
        iconColor: "#055875",
        showCancelButton: true,
        cancelButtonText: "Cancel",
        confirmButtonText: "Delete",
      }).then(async (result) => {
        if (result.isConfirmed) {
          const { resp, status } = (await useDeleteSavedJob(jobId)) as {
            resp: string;
            status: number;
          };
          // console.log("Application deleted successfully:", resp, "Status:", status);
          router.refresh();
        }
      });
    } catch (error) {
      console.error("Error deleting file:", error);
    }
  };

  return (
    <div className="tabs-box">
      <div className="widget-title">
        {/* <h4>My Saved Jobs</h4> */}

        <div className="chosen-outer">
          {/* <!--Tabs Box--> */}
          <select
            className="chosen-single form-select"
            onChange={handleDateRangeChange}
            value={sortAndFilterOptions.datePostedRange}
          >
            <option value="">Date Posted</option>
            <option value="any_time">Any Time</option>
            <option value="last_30_days">Past Month</option>
            <option value="last_7_days">Past Week</option>
            <option value="last_24_hours">Past 24 Hours</option>
          </select>

          <select
            className="chosen-single form-select"
            // value={sortOrder}
            // onChange={(e) => setSortOrder(e.target.value)}
            onChange={handleSortChange}
            value={sortAndFilterOptions.sortOption}
          >
            <option value="desc">Newest</option>
            <option value="asc">Oldest</option>
          </select>
        </div>
      </div>
      {/* End filter top bar */}

      {/* Start table widget content */}
      <div className="widget-content">
        <div className="table-outer">
          <div className="table-outer">
            {!loading && (
              <InfiniteScroll
                dataLength={jobs!.length}
                next={getSavedJobs}
                hasMore={pageInfo !== null}
                style={{ overflow: "visible" }}
                // scrollableTarget="scrollable_div"
                endMessage={
                  <p style={{ textAlign: "center" }}>
                    Yay 🎉 You have reached the end.
                  </p>
                }
                loader={
                  <div className="d-flex justify-content-center py-3">
                    <Oval
                      visible={true}
                      height="40"
                      width="40"
                      color="#055875"
                      secondaryColor="#055875c2"
                      ariaLabel="oval-loading"
                    />
                  </div>
                }
              >
                <table className="default-table manage-job-table">
                  <thead>
                    <tr>
                      <th>Job Title</th>
                      <th>Date Posted</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>

                  <tbody>
                    {jobs?.map((item: SavedJobsData) => (
                      <tr key={item.id}>
                        <td>
                          {/* <!-- Job Block --> */}
                          <div className="job-block">
                            <div className="inner-box">
                              <div className="content">
                                <span className="company-logo">
                                  <img
                                    src={
                                      item.jobPost?.cmpanyLogoUrl ||
                                      "/images/human_capital_logo.png"
                                    }
                                    alt={item.jobPost?.title}
                                    onError={(e) => {
                                      e.currentTarget.onerror = null;
                                      e.currentTarget.src =
                                        "/images/human_capital_logo.png";
                                    }}
                                  />
                                </span>
                                <h4>
                                  <Link href={`/jobs/${item.jobPostId}`}>
                                    {item.jobPost?.title}
                                  </Link>
                                </h4>
                                <ul className="job-info">
                                  {/* <li>
                                  <span className="icon flaticon-briefcase"></span>
                                  {item.jobPost.category}
                                </li> */}
                                  <li>
                                    <span className="icon flaticon-map-locator"></span>
                                    {item.jobPost?.location}
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>
                          {useFormatDate(item.jobPost?.createdAt as string)}
                        </td>
                        <td className="status">Active</td>
                        <td>
                          <div className="option-box">
                            <ul className="option-list">
                              <li>
                                <Link href={`/jobs/${item.jobPostId}`}>
                                  <button data-text="View Job">
                                    <span className="la la-eye"></span>
                                  </button>
                                </Link>
                              </li>
                              <li>
                                <button
                                  onClick={() => {
                                    handleDelete(item.jobPostId);
                                  }}
                                  data-text="Delete from Saved Jobs"
                                >
                                  <span className="la la-trash"></span>
                                </button>
                              </li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </InfiniteScroll>
            )}
            <div className="d-flex justify-content-center">
              {loading && (
                <Oval
                  visible={true}
                  height="40"
                  width="40"
                  color="#055875"
                  ariaLabel="oval-loading"
                  wrapperStyle={{}}
                  wrapperClass=""
                />
              )}
            </div>
          </div>
        </div>
      </div>
      {/* End table widget content */}
    </div>
  );
};

export default SavedJobsTable;