"use client";

import { Link, usePathname } from "@/i18n/routing";
import { getUserNotifications } from "@/service/landing/landing";
import { getTimestamp } from "@/utils/globals";
import { Icon } from "@iconify/react/dist/iconify.js";
import { useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { useTranslations } from "next-intl";

const InboxSection = () => {
  const router = useRouter();
  const pathname = usePathname();
  const isUpdate = pathname.includes("update");
  const searchParams = useSearchParams();
  const t = useTranslations("LandingPage");

  const page: any = searchParams?.get("page");

  const pages = page ? page - 1 : 0;

  const [notifications, setNotifications] = useState([]);
  const [getTotalData, setGetTotalData] = useState();
  const [, setGetTotalPage] = useState();

  useEffect(() => {
    async function getNotif() {
      const response = await getUserNotifications(pages, 2);
      setNotifications(response?.data?.data?.content);
      setGetTotalData(response?.data?.data?.totalElements);
      setGetTotalPage(response?.data?.data?.totalPage);
    }

    async function getNotifUpdate() {
      const response = await getUserNotifications(pages, 3);
      setNotifications(response?.data?.data?.content);
      setGetTotalData(response?.data?.data?.totalElements);
      setGetTotalPage(response?.data?.data?.totalPage);
    }

    if (isUpdate) {
      getNotifUpdate();
    } else {
      getNotif();
    }
  }, [pages]);

  return (
    <div className="max-w-6xl h-screen flex flex-col mx-auto p-4 lg:p-24 gap-5">
      <div className="flex items-center justify-center mb-6">
        <svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 24 24">
          <g fill="#bb3523" fill-rule="evenodd" clip-rule="evenodd">
            <path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0" />
            <path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21" />
          </g>
        </svg>{" "}
        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">{t("inbox", { defaultValue: "Inbox" })}</h2>
      </div>

      <div className="flex flex-col justify-center items-center gap-3">
        <div className="flex justify-center">
          <div className="flex flex-row gap-10 items-center justify-center">
            <div className="">
              <p className="bg-[#bb3523] py-1 px-3 rounded-full">{t("inbox", { defaultValue: "Inbox" })}</p>
            </div>
            <Link href={`/inbox/update`}>{t("update", { defaultValue: "Update" })}</Link>
          </div>
        </div>
        <div className="py-10 px-8 w-[400px] mt-3 border border-black rounded-lg flex flex-col">
          <h1 className="mb-3 text-lg font-semibold">{t("notifList", { defaultValue: "Notif List" })}</h1>
          <div className="hover:bg-slate-200 rounded-md">
            {notifications?.map((list: any) => (
              <a className="flex flex-row items-center ml-1" href={"/" + list.redirectUrl}>
                {(() => {
                  switch (Number(list.notificationTypeId)) {
                    case 2:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="fa:comment" fontSize={25} />{" "}
                        </div>
                      );

                    case 3:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="fa:upload" fontSize={25} />{" "}
                        </div>
                      );

                    case 4:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="la:check-double" fontSize={25} />{" "}
                        </div>
                      );

                    case 5:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="fa:comments" fontSize={25} />{" "}
                        </div>
                      );

                    case 6:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="fa:tasks" fontSize={25} />{" "}
                        </div>
                      );

                    case 7:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="fa:pencil-square" fontSize={25} />{" "}
                        </div>
                      );

                    case 8:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="fa:times-circle" fontSize={25} />{" "}
                        </div>
                      );

                    default:
                      return (
                        <div className="text-[#bb3523]">
                          {" "}
                          <Icon icon="fa:info-circle" fontSize={25} />{" "}
                        </div>
                      );
                  }
                })()}
                <div className="ml-3">
                  <span className="block">{list.message}</span>
                  <span className="text-xs">{getTimestamp(new Date(list.createdAt))}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default InboxSection;