import { useQuery } from "react-query";
import api from "../../src/services/Api";
import Cookies from "js-cookie";
import { useRouter } from "next/router";
import LoginNavbar from "../../src/components/navbar/login-navbar";
import { AiOutlineReload } from "react-icons/ai";
import Footer from "../../src/components/Footer/footer";
import Menu from "../../src/components/navbar/menu";

function Ceremony() {
  const router = useRouter();
  const ceremonyId = Cookies.get("ceremonyId");

  const {
    isLoading,
    error,
    data: ceremonies,
  } = useQuery("repoData", () =>
    api.get("assigned-ceremonies").then((res) => res.data.data)
  );

  if (isLoading) return "Loading...";
  //@ts-ignore
  if (error) {
    router.push("/login")
  }

  const handleSelectCeremony = (ceremonyId: any) => {
    Cookies.set("ceremonyId", ceremonyId);
    router.push(`/arrival`);
  };

  return (
    <div>
      <div className="flex flex-col w-full justify-center">
        <LoginNavbar />
        <div className="flex justify-center w-full">
          <button
            onClick={() => {
              router.reload();
            }}
            className={`flex border rounded ${"bg-blue-600"} text-white w-1.5/12 justify-center p-4 shadow-md  `}
          >
            <div className="items-center font-semibold flex gap-2.5">
              <AiOutlineReload />
              Refresh Page
            </div>
          </button>
        </div>
        <div className="sm:grid sm:grid-cols-4 grid grid-cols-2 gap-2 w-full items-center justify-center px-5 sm:px-20 my-2.5">
          <button
            className="border rounded-md py-4 border-blue-900 bg-slate-900 text-white"
            type="button"
            onClick={() => router.push(`/ceremony`)}
          >
            Ceremony List
          </button>
          {ceremonyId ? (
            <>
              <button
                className="border rounded-md py-4 border-blue-900"
                type="button"
                onClick={() => router.push(`/arrival`)}
              >
                Arrival
              </button>
              <button
                className="border rounded-md py-4 border-blue-900"
                type="button"
                onClick={() => router.push(`/collect`)}
              >
                Collect
              </button>
            </>
          ) : (
            <></>
          )}
          <button
            className="border rounded-md py-4 border-blue-900 "
            onClick={() => router.push(`/return`)}
          >
            Return
          </button>
        </div>
        <div className="container mx-auto my-10">
          {ceremonies != null ? (
            ceremonies.map((ceremony: any, index: any) => {
              return (
                <div
                  className={`text-center my-10 py-7 bg-orange-100 text-lg font-semibold rounded-full cursor-pointer shadow-md`}
                  onClick={() => handleSelectCeremony(ceremony.id)}
                  key={ceremony.id}
                >
                  <div>{ceremony.detail}</div>
                  <div className="mt-3">{ceremony?.institution?.name}</div>
                </div>
              );
            })
          ) : (
            <div className="flex flex-col w-full lg:p-10">
              <div
                className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-center"
                role="alert"
              >
                <span className="block sm:inline font-bold text-3xl">
                  Ceremony Not Assigned Yet
                </span>
              </div>
            </div>
          )}
        </div>
        <Footer />
      </div>
    </div>
  );
}

export default Ceremony;