import React, { useEffect, useRef, 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, AiOutlineScan } from "react-icons/ai";
import Cookies from "js-cookie";

import { toast } from "sonner";
import MessageModal from "../../src/components/modals/message-modal";
import UncollectedList from "../../src/components/pre-order-product/uncollected-list";

function UncollectedPreOrderProductList() {
  const { loader, setLoader } = useAuth();
  const [ceremonies, setCeremonies] = useState<any>([]);

  const ceremonyId = Cookies.get("ceremonyId");
  const arrival = Cookies.get("arrival") ?? null;
  const isPreOrderEnabled = Cookies.get("isPreOrderEnabled") ?? "No";
  const timeoutRef = useRef<number | null>(null);
  const [fieldData, setFieldData] = useState<any>(null);

  //get Request regalia-collect/invId
  //get Request arrival regalia-arrival/invId
  //check using Proceed variable to load or hide button true/false
  useEffect(() => {
    fetchCeremonies();
  }, []);

  const fetchCeremonies = () => {
    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);
      });
  };
  const fetchUncollectedPreOrderProducts = (ceremonyId: any, page = 1) => {
    if (!ceremonyId) {
      setFieldData(null);
      return;
    }
    setLoader(true);
    api
      .get(`order/pre-order/uncollected`, {
        params: {
          ceremony_id: ceremonyId,
          page: page,
        },
      })
      .then((response) => {
        if (response.data.success == true) {
          setFieldData(response.data.data);
        } else {
          toast.error(response.data.message);
        }
      })
      .catch((e) => {
        console.log(e);
      })
      .finally(() => {
        setLoader(false);
      });
  };

  const [selectedCeremonyId, setSelectedCeremonyId] = useState("");

  //@ts-ignore
  const handleChangeCeremony = (e) => {
    setSelectedCeremonyId(e.target.value);
    fetchUncollectedPreOrderProducts(e.target.value);
  };

  const ceremonyList = () => {
    return (
      <>
        {ceremonies.length > 0 ? (
          <>
            <div className="flex flex-col p-2.5 overflow-hidden shadow-lg rounded w-full">
              <div className="flex flex-col w-full px-4 md:px-20 font-bold">
                <div className="w-full">
                  <select
                    className="block w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    value={selectedCeremonyId}
                    onChange={handleChangeCeremony}
                  >
                    <option value="">Select option</option>
                    {ceremonies.map((ceremony: any, index: any) => (
                      <option key={index} value={ceremony.id}>
                        {ceremony.detail}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="text-red-800">No ceremonies available</div>
          </>
        )}
      </>
    );
  };

  const router = useRouter();

  return (
    <LoadingOverlay active={loader} spinner text="Processing">
      <div className="flex flex-col w-full justify-center bg-gray-100">
        <LoginNavbar />
        <div className="flex justify-center w-full">
          <div className="flex w-full justify-center items-center max-w-7xl">
            <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>
        <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 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 bg-slate-900 text-white text-sm sm:text-base"
                type="button"
                onClick={() => router.push(`/pending-pre-order-product`)}
              >
                Pending Pre-Order Merchandise
              </button>
            </>
          ) : (
            <></>
          )}
        </div>
        <>{ceremonyList()}</>

        {fieldData && fieldData.data.length > 0 && (
          <UncollectedList
            uncollectedData={fieldData}
            ceremonyId={selectedCeremonyId}
            fetchUncollected={fetchUncollectedPreOrderProducts}
          />
        )}
        <Footer />
      </div>
    </LoadingOverlay>
  );
}

export default UncollectedPreOrderProductList;