import { useRouter } from "next/navigation";
import { useContext, useEffect, useState } from "react";
import { AuthContextType, NotificationData } from "../../..";
import { AuthContext } from "../../../contexts/auth";
import { useGetCandidateNotifications } from "../../../utils/hooks/useGetCandidateNotifications";
import { useGetCompanyNotifications } from "../../../utils/hooks/useGetCompanyNotifications";
import { useUpdateCandidateNotification } from "../../../utils/hooks/useUpdateCandidateNotification";
import { useUpdateCompanyNotification } from "../../../utils/hooks/useUpdateCompanyNotification";

const Notification = () => {
  const router = useRouter();
  const { userRole } = useContext(AuthContext) as AuthContextType;
  const [notifications, setNotifications] = useState<NotificationData[]>([]);
  const [getIsLoading, setIsLoading] = useState<boolean>(false);
  useEffect(() => {
    const FetchNotifications = async () => {
      setIsLoading(true);
      const { resp } = (await (
        userRole === "Candidate"
          ? useGetCandidateNotifications
          : useGetCompanyNotifications
      )("/?page=1", 5)) as Response;

      setIsLoading(false);

      setNotifications(resp.data);
    };
    FetchNotifications();
  }, []);

  const handleClick = async (
    notificationId: number,
    id: number,
    message: string
  ) => {
    setIsLoading(true);
    await (
      userRole === "Candidate"
        ? useUpdateCandidateNotification
        : useUpdateCompanyNotification
    )(notificationId);
    setIsLoading(false);
    if (
      message === "Job Recommendation" ||
      message === "Candidate Recommendation"
    ) {
      userRole === "Candidate"
        ? router.push(`/jobs/${id}`)
        : router.push(`/candidate/${id}`);
    } else if (message.includes("Interview")) {
      userRole === "Candidate"
        ? router.push(`/dashboard/my-scheduled-interview`)
        : router.push(`/dashboard/scheduled-interviews`);
    } else if (message.includes("Message")) {
      router.push(`/dashboard/messages`);
    } else if (message.includes("Skill Test")) {
      router.push(`/dashboard/applied-jobs`);
    }
  };

  return (
    <>
      <ul className="notification-list">
        {notifications?.map((data: NotificationData, index: number) => (
          <li
            key={index}
            onClick={() =>
              handleClick(
                data.id,
                userRole === "Candidate" ? data.jobId : data.candidateId,
                data.message
              )
            }
            className={`${index % 2 == 0 ? "success" : "danger"} ${data.status === "unread" && "fw-bold notification-unread"} d-flex align-items-center cursor-pointer mb-1`}
          >
            <span className="icon flaticon-briefcase ms-1"></span>
            {userRole === "Candidate" && (
              <>
                {data.message === "Job Recommendation" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    Apply for the role of{" "}
                    <span className="colored">{data?.jobPost?.title}</span> in{" "}
                    {data?.jobPost?.location}.
                  </p>
                ) : data.message === "Interview Notification" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    You have a interview scheduled for the role of{" "}
                    <span className="colored">{data.jobPost?.title}</span> in{" "}
                    {data.jobPost?.location}.
                  </p>
                ) : data.message === "Interview Reschedule Accepted" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    Your interview for the role of{" "}
                    <span className="colored">{data.jobPost?.title}</span> in{" "}
                    {data.jobPost?.location} has been rescheduled.
                  </p>
                ) : data.message === "Interview Reschedule Rejected" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    Your reschedule request for the role of{" "}
                    <span className="colored">{data.jobPost?.title}</span> in{" "}
                    {data.jobPost?.location} has been rejected.
                  </p>
                ) : data.message.includes("Message received") ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    <span className="colored">
                      {data.message.split("from")[1]}
                    </span>{" "}
                    just messaged you.
                  </p>
                ) : data.message === "Interview Reschedule" ? (
                    <p
                      className={`${data.status === "unread" && "fw-bold"} mb-1`}
                    >
                      Your interview was rescheduled please check your scheduled
                      interviews.
                    </p>
                ) : data.message === "Skill Test" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    You have a skill test assigned for the role of <span className="colored">{data?.jobPost?.title}</span>.
                  </p>
                ) : (
                  <p className={`${data.status === "unread" && "fw-bold"} mb-1`}>{data.message}</p>
                )}
              </>
            )}
            {userRole === "Company" && (
              <>
                {data.message === "Candidate Recommendation" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    We found a new candidate for the role of{" "}
                    <span className="colored">{data?.jobPost?.title}.</span>
                  </p>
                ) : data.message === "Interview Reschedule Requested" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    Your Have a reschedule request for{" "}
                    <span className="colored">{data?.jobPost?.title}.</span>
                  </p>
                ) : data.message.includes("Message received") ? (
                    <p
                      className={`${data.status === "unread" && "fw-bold"} mb-1`}
                    >
                      <span className="colored">
                        {data.message.split("from")[1]}
                      </span>{" "}
                      just messaged you.
                    </p>
                ) : data.message === "Skill Test" ? (
                  <p
                    className={`${data.status === "unread" && "fw-bold"} mb-1`}
                  >
                    A candidate has completed the skill test for <span className="colored">{data?.jobPost?.title}</span>.
                  </p>
                ) : (
                  <p className={`${data.status === "unread" && "fw-bold"} mb-1`}>{data.message}</p>
                )}
              </>
            )}
          </li>
        ))}
      </ul>
    </>
  );
};

export default Notification;