import { useEffect, useState } from "react";
import { useAppDispatch } from "../../../../../app/redux/hooks";
import {
  getWishListAsync,
  removeFromWishListAsync,
} from "../../../../../app/slices/wishlistSlice/wishlistSlice";
import { setSelectProduct } from "../../../../../app/slices/productDiscriptionSlice/ProductDescriptionSlice";
import CustomDialog from "../../../../components/custom/dialog";
import { QuickAddModal } from "../../../public/productListPage/components/quickAdd/quickAdd";
import { Link } from "react-router-dom";
import { CircularProgress } from "@mui/material";

export const WishList = () => {
  const dispatch = useAppDispatch();
  const [wishList, setWishList] = useState<any[]>([]);
  const [modalType, setModalType] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    dispatch(getWishListAsync()).then((response: any) => {
      setWishList(response?.payload?.data?.data || []);
      setIsLoading(false);
    });
  }, [dispatch]);

  const handleRemoveFromWishList = (productId: any) => {
    dispatch(removeFromWishListAsync(productId));
    setWishList(wishList.filter((_: any) => _.product_id !== productId));
  };

  const onOpenModal = (type: string) => {
    setModalType(type);
  };

  const onCloseModal = () => {
    setModalType("");
  };

  const selectProduct = (id: any) => {
    dispatch(setSelectProduct(id));
    localStorage.setItem("product_id", id);
  };

  return (
    <>
      <div
        className="my-account-content account-order"
        style={{
          fontFamily: "Albert Sans, sans-serif",
          fontSize: "14px",
          lineHeight: "22px",
          fontWeight: "400",
        }}
      >
        <h4 className="title-right">Wishlist</h4>
        {isLoading ? (
          <div className="wrap-account-order" style={{ minHeight: "50vh" }}>
            <CircularProgress
              style={{
                position: "absolute",
                left: "50%",
                transform: "translate(-50%, -50%)",
              }}
            />
          </div>
        ) : (
          <>
            <div className="wrap-account-order">
              <div className="row">
                {wishList.length > 0 ? (
                  wishList.map((product: any, index: number) => (
                    <div key={index} className="col-md-6">
                      <div className="card mb-3">
                        <div className="card-body">
                          <div className="row align-items-start">
                            <div className="col-md-4">
                              <Link
                                to={`/products/${product.product_id}`}
                                onClick={() =>
                                  selectProduct(product?.product_id)
                                }
                              >
                                <img
                                  data-src={`${process.env.REACT_APP_API_URL}${product?.product_img}`}
                                  src={`${process.env.REACT_APP_API_URL}${product?.product_img}`}
                                  className="img-fluid"
                                  alt=""
                                />
                              </Link>
                            </div>
                            <div className="col-md-8">
                              <div className="d-flex justify-content-between align-items-start">
                                <div>
                                  <p>
                                    <b className="address-text">
                                      {product.product_name}
                                    </b>
                                  </p>
                                  <p className="mt-2">
                                    <span className="price address-text">
                                      ₹{product.offerprice}
                                    </span>
                                  </p>
                                  <button
                                    className="btn-prime mt-3"
                                    onClick={() => {
                                      onOpenModal("quickAdd");
                                      selectProduct(product?.product_id);
                                    }}
                                  >
                                    Add to Cart
                                  </button>
                                </div>
                                <div className="text-end">
                                  <a
                                    onClick={() => {
                                      handleRemoveFromWishList(
                                        product?.product_id
                                      );
                                    }}
                                  >
                                    <span className="icon icon-delete"></span>
                                  </a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))
                ) : (
                  <div
                    style={{
                      fontSize: "18px",
                      alignItems: "center",
                      display: "flex",
                      flexDirection: "column",
                    }}
                  >
                    <span className="title wow fadeInUp" data-wow-delay="0s">
                      No data found
                    </span>
                  </div>
                )}
              </div>
            </div>
          </>
        )}
      </div>
      <CustomDialog
        component={<QuickAddModal modalType={modalType} />}
        title="Quick Add"
        openDialog={modalType === "quickAdd"}
        handleCloseDialog={onCloseModal}
        modalPlace="center"
      />
    </>
  );
};