import Link from "next/link.js";
import { Dispatch, SetStateAction, useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import { Oval } from "react-loader-spinner";
import { useFormatDate } from "../../../../hooks/useFormatDate";
import { Job, NotificationData } from "../../../..";

interface JobAlertsTable {
  jobs: Job[];
  loading: boolean;
  setSortOrder: Dispatch<SetStateAction<string>>;
  pageInfo: string | null;
  getNotiJobs: () => void;
}

const JobAlertsTable: React.FC<JobAlertsTable> = ({
  jobs,
  loading,
  setSortOrder,
  pageInfo,
  getNotiJobs,
}) => {
  useEffect(() => {
    console.warn("pageInfo", pageInfo);
  }, [pageInfo])
  return (
    <div className="tabs-box">
      <div className="widget-title">
        {/* <h4>My Saved Jobs</h4> */}

        {/* <div className="chosen-outer">
          <select
            className="chosen-single form-select"
            onChange={(e) => setSortOrder(e.target.value)}
          >
            <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={getNotiJobs}
                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: Job) => (
                      <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?.cmpanyLogoUrl ||
                                      "/images/human_capital_logo.png"
                                    }
                                    alt={item?.title}
                                    onError={(e) => {
                                      e.currentTarget.onerror = null;
                                      e.currentTarget.src =
                                        "/images/human_capital_logo.png";
                                    }}
                                  />
                                </span>
                                <h4>
                                  <Link href={`/jobs/${item?.id}`}>
                                    {item?.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?.location}
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td>{useFormatDate(item?.createdAt as string)}</td>
                        <td className="status">Active</td>
                        <td>
                          <div className="option-box">
                            <ul className="option-list">
                              <li>
                                <Link href={`/jobs/${item?.id}`}>
                                  <button data-text="View Job">
                                    <span className="la la-eye"></span>
                                  </button>
                                </Link>
                              </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 JobAlertsTable;