import React, { useEffect, useState } from "react";
import Footer from "../../src/components/Footer/footer";
import LoginNavbar from "../../src/components/navbar/login-navbar";
import { useAuth } from "../../src/context/Auth";
import api from "../../src/services/Api";
import LoadingOverlay from "react-loading-overlay-ts";
import { useRouter } from "next/router";
import { AiOutlineReload } from "react-icons/ai";
import { toast } from "sonner";
import Cookies from "js-cookie";

function Collection() {
  const [ceremonies, setCeremonies] = useState<any>(null);
  const router = useRouter();
  const { loader, setLoader, setCeremony } = useAuth();
  const ceremonyId = Cookies.get("ceremonyId") ?? null;
  const isPreOrderEnabled = Cookies.get("isPreOrderEnabled") ?? "No";
  const arrival = Cookies.get("arrival") ?? null;
  const handleSelectCeremony = (ceremonyId: any) => {
    Cookies.set("ceremonyId", ceremonyId);
    // @ts-ignore
    const ceremony = ceremonies.find((item) => item.id === ceremonyId);
    Cookies.set("arrival", ceremony.arrival);
    Cookies.set(
      "isPreOrderEnabled",
      ceremony.enable_pre_order_collection_option,
    );
    setCeremony(ceremony);
    if (ceremony.arrival == "Yes") {
      router.push(`/arrival`);
    } else {
      router.push(`/collect`);
    }
  };
  const selectedCeremony = (ceremonyId: any) => {
    // @ts-ignore
    const ceremony = ceremonies.find((item) => item.id === ceremonyId);
    setCeremony(ceremony);
  };
  useEffect(() => {
    setLoader(true);
    api
      .get("assigned-ceremonies")
      .then((response) => {
        if (response.data.success == true) {
          setCeremonies(response.data.data);
        } else {
          toast.error(response.data.message);
        }
      })
      .catch((e) => {
        console.log(e);
      })
      .finally(() => {
        setLoader(false);
      });
  }, []);

  return (
    <LoadingOverlay active={loader} spinner text="Processing">
      <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-6 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 text-sm sm:text-base"
            type="button"
            onClick={() => router.push(`/ceremony`)}
          >
            Ceremony List
          </button>
          {ceremonyId ? (
            <>
              {arrival == "Yes" ? (
                <>
                  <button
                    className="border rounded-md py-4 border-blue-900 text-sm sm:text-base"
                    type="button"
                    onClick={() => router.push(`/arrival`)}
                  >
                    Arrival
                  </button>
                </>
              ) : (
                <></>
              )}
              <button
                className="border rounded-md py-4 border-blue-900 text-sm sm:text-base"
                type="button"
                onClick={() => router.push(`/collect`)}
              >
                Collect
              </button>
            </>
          ) : (
            <></>
          )}
          <button
            className="border rounded-md py-4 border-blue-900 text-sm sm:text-base"
            onClick={() => router.push(`/return`)}
          >
            Return
          </button>
          {isPreOrderEnabled === "Yes" ? (
            <>
              <button
                className="border rounded-md py-4 border-blue-900 text-sm sm:text-base"
                type="button"
                onClick={() => router.push(`/pre-order-product`)}
              >
                Collect Pre-Order Merchandise
              </button>
              <button
                className="border rounded-md py-4 border-blue-900 text-sm sm:text-base"
                type="button"
                onClick={() => router.push(`/pending-pre-order-product`)}
              >
                Pending Pre-Order Merchandise
              </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-${
                    (index + 1) * 100
                  } text-lg font-semibold rounded-full cursor-pointer shadow-md`}
                  onClick={() => handleSelectCeremony(ceremony.id)}
                  key={ceremony.id}
                >
                  <div className="text-sm sm:text-base">{ceremony.detail}</div>
                  <div className="mt-3 text-sm sm:text-base">
                    {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>
    </LoadingOverlay>
  );
}

export default Collection;