import React, { useEffect, useState } from "react";
import { FaCheck, FaRedo } from "react-icons/fa";
import PreOrderPopupModal from "../modals/pre-order-popup-modal";

function PreOrderProductCard({ product, invoiceNumber, onUpdateSuccess }: any) {
  const [preOrderModal, setPreOrderModal] = useState(false);
  const [productStatus, setProductStatus] = useState("");
  const [popupTitle, setPopupTitle] = useState("");
  const [productId, setProductId] = useState("");
  const [productName, setProductName] = useState("");

  const handleCollect = (id: any, name?: string) => {
    setProductStatus("Collected");
    setPreOrderModal(true);
    setPopupTitle("Collect Pre-Order Product");
    setProductId(id);
    if (name) setProductName(name);
  };

  const handleRevert = (id: any, name?: string) => {
    setProductStatus("Ordered");
    setPreOrderModal(true);
    setPopupTitle("Revert Pre-Order Product Status");
    setProductId(id);
    if (name) setProductName(name);
  };

  return (
    <>
      {preOrderModal && (
        <>
          <PreOrderPopupModal
            message={
              productStatus === "Collected"
                ? `Are you sure want to collect?`
                : `Are you sure want to revert the its status?`
            }
            status={productStatus}
            setPreOrderModal={setPreOrderModal}
            invoiceNumber={invoiceNumber}
            productId={productId}
            productName={productName}
            popupTitle={popupTitle}
            onSuccess={onUpdateSuccess} // just pass the function
          />
        </>
      )}
      <div
        key={product.id}
        className={`grid sm:grid-cols-4 grid-cols-1 items-center border border-gray-200 rounded-lg shadow-md ${
          product?.status === "Collected" ? "bg-green-200" : "bg-white"
        }`}
      >
        {/* Image */}
        <div className="p-2">
          {product?.other_product?.image_url && (
            <img
              className="object-contain bg-white rounded-lg"
              src={product.other_product.image_url}
              alt={product?.other_product?.product_name}
            />
          )}
        </div>

        {/* Product Name */}
        <div className="px-4">
          <div className="text-xl font-bold tracking-tight">
            {product?.other_product?.product_name}
          </div>
        </div>

        {/* Status */}
        <div className="sm:py-0 py-5">
          {product?.status == "Collected" ? (
            <span className="bg-green-600 text-white font-bold px-4 py-2 rounded-3xl">
              Collected
            </span>
          ) : (
            <span className="bg-slate-600 text-white font-bold px-4 py-2 rounded-3xl">
              Ordered
            </span>
          )}
        </div>

        {/* Status Message */}
        <div className="font-semibold sm:py-0 py-5">
          {product?.status === "Ordered" && (
            <button
              onClick={() =>
                handleCollect(product.id, product?.other_product?.product_name)
              }
              className="rounded-lg border-white border-2 bg-green-500 shadow-lg  text-white flex items-center justify-center p-4 w-full text-3xl"
            >
              <FaCheck />
            </button>
          )}

          {product?.status === "Collected" && (
            <button
              onClick={() =>
                handleRevert(product.id, product?.other_product?.product_name)
              }
              className="rounded-lg border-white border-2 bg-red-500 shadow-lg  text-white flex items-center justify-center p-4 w-full text-3xl"
            >
              <FaRedo />
            </button>
          )}
        </div>
      </div>
    </>
  );
}

export default PreOrderProductCard;