import React, { useEffect } from "react";
import { useAuth } from "../../context/Auth";
import api from "../../services/Api";

import { AiOutlineExclamationCircle } from "react-icons/ai";
import Cookies from "js-cookie";
import { toast } from "sonner";

function PreOrderPopupModal({
  message,
  status,
  setPreOrderModal,
  invoiceNumber,
  productId,
  productName,
  popupTitle,
  onSuccess,
}: any) {
  const { setLoader } = useAuth();
  const ceremonyId = Cookies.get("ceremonyId");

  const onSubmit = () => {
    setLoader(true);
    console.log(ceremonyId);
    api
      .post(`order/pre-order/update-status/${invoiceNumber}`, {
        ceremony_id: ceremonyId,
        status: status,
        product_id: productId,
      })
      .then((res) => {
        if (res.data.success == true) {
          toast.success("Graduate Registered Successfully");
          setPreOrderModal(false);
          if (onSuccess) onSuccess();
        } else {
          toast.error("Error in process. Try again");
        }
      })
      .catch((e) => {
        console.log(e);
      })
      .finally(() => setLoader(false));
  };
  return (
    <>
      <div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
        <div className="relative  my-6 mx-auto max-w-xl w-screen">
          {/*content*/}
          <div
            className={`border-0 rounded-lg shadow-lg relative flex flex-col w-full ${status == "Collected" ? "bg-green-100" : "bg-red-100"} outline-none focus:outline-none`}
          >
            {/*header*/}
            <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
              <h3 className="text-lg  text-gray-900 font-bold ">
                {popupTitle}
              </h3>
              <button
                type="button"
                onClick={() => setPreOrderModal(false)}
                className="text-gray-400 bg-transparent  rounded-lg text-sm p-1.5 ml-auto inline-flex items-center  "
              >
                <svg
                  aria-hidden="true"
                  className="w-5 h-5"
                  fill="currentColor"
                  viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fillRule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clipRule="evenodd"
                  ></path>
                </svg>
              </button>
            </div>
            {/*body*/}
            <div className="relative p-6 flex flex-col font-normal text-sm gap-4 item-center  items-center">
              <AiOutlineExclamationCircle size={50} className="text-red-500" />
              <p className="font-bold text-xl text-orange-700 text-center">
                {productName}
              </p>
              <p className="font-bold text-xl">{message}</p>
            </div>
            {/*footer*/}
            <div className="flex items-center justify-center p-6 border-t border-solid border-slate-200 rounded-b">
              <button
                className="bg-blue-500 text-white  w-full border border-blue-700 rounded  hover:text-blue-500 hover:bg-white font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                type="button"
                onClick={onSubmit}
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
    </>
  );
}

export default PreOrderPopupModal;