import { HiLocationMarker, HiOutlineBadgeCheck } from "react-icons/hi";
import { TbTruckDelivery } from "react-icons/tb";
import { BsLightningChargeFill } from "react-icons/bs";
import { TbShare3 } from "react-icons/tb";
import { RiDeleteBinLine } from "react-icons/ri";
import { BiBookmark } from "react-icons/bi";
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { RiArrowDownSFill } from "react-icons/ri";
import { BiRupee, BiStopwatch } from "react-icons/bi";
import { AiOutlineHeart, AiFillStar } from "react-icons/ai";
import { CiShop } from "react-icons/ci";
import { GiScooter } from "react-icons/gi";
import { IoCloseSharp } from "react-icons/io5";
import ModalPozoPublic from "../../Components/PozoPublicCard/ModalPozoPublic.jsx";
// import ShopCardQuantity from "./ShopCardQuantity";
import HeartSvg from "../../Images/Assets/HeartSvg";
import "../../Styles/Components/ShopCard.scss";
import pozologoimg from "../../Images/PozoStore.svg";
import { useNavigate } from "react-router-dom";
import FullPageLoader from "../../Components/Loader/PozoPublicLoader.jsx";
import { useDispatch } from "react-redux";
import { changeCartShow } from "../../Features/Cart/GlobalPublicBooking.js";

const ShopCard = ({
  id,
  shopName,
  dishName,
  imageUrl,
  price,
  deliveryTime,
  deliveryDistance,
  offer,
  isVeg,
  isNonVeg,
  isFavorite,
  addToCartBtn,
  showCartShopName,
  showQuantityModal,
  showChangeQuantity,
  offerValue,
  deliveryAvailable,
  MRP,
  Buy,
  QuantityPrice,
  Review,
  buyNow,
  direction,
  cartSDS,
  deliveryStatus,
  Cartoffer,
  shopNameShow,
  CartMRP,
  Color,
  Size,
  Accredited,
  showSize,
  showColor,
  youSave,
  SDSIcon,
  multiQty,
  HomePrice,
  ShowPinCodecheck,
  ProductDescription,
  InfoReview,
  SingleImage,
  ImageForwad,
  Imagebackward,
  imageChangeButtons,
  imgwidth,
  imgheight,
  ShopCardDetailswidth,
  Type,
}) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const [fillColor, setFillColor] = useState(isFavorite ? "white" : "#D42527");
  const [quantity, setQuantity] = useState(0);
  const [isVisible, setIsVisible] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loading, setLoading] = useState(false);



  const [isOpen, setIsOpen] = useState(false);
  const [isCartVisible, setIsCartVisible] = useState(false);

  const openModal2 = () => setIsOpen(true);
  const closeModal2 = () => setIsOpen(false);
  const handleHeartClick = () => {
    setFillColor((prevColor) => (prevColor === "white" ? "#D42527" : "white"));
  };

  const handleAddToCartClick = () => {
    setIsVisible(true);
    setIsCartVisible(true);
    setQuantity((prevQuantity) => prevQuantity + 1);
    dispatch(changeCartShow(true));
  };

  const handleQuantityChange = (change) => {
    setQuantity((prevQuantity) => {
      const newQuantity = Math.max(prevQuantity + change, 0);
      if (newQuantity === 0) {
        setIsVisible(false);
        dispatch(changeCartShow(false));
      }
      return newQuantity;
    });
  };

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  const PageNavigate = () => {
    setLoading(true);

    setTimeout(() => {
      navigate("/Store");
    }, 700);
  };

  const PageIndividualNavigate = () => {
    setLoading(true);

    setTimeout(() => {
      navigate("/IndividualCard");
    }, 700);
  };

  const [currentImage, setCurrentImage] = useState(imageUrl);
  const [fade, setFade] = useState(true);

  useEffect(() => {
    changeImage(imageUrl);
  }, [imageUrl]);
  const changeImage = (newImage) => {
    setFade(false);
    setTimeout(() => {
      setCurrentImage(newImage);
      setFade(true);
    }, 300); // Duration of the fade-out effect
  };
  return (
    <>
      {loading && <FullPageLoader />}
      {isOpen && (
        <div className="modal-overlay" onClick={closeModal2}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <button className="close-button" onClick={closeModal2}>
              ×
            </button>
            <img
              className={`slider-image ${fade ? "fade-in" : "fade-out"}`}
              src={imageUrl}
              alt="large"
            />
            <button
              onClick={() => {
                Imagebackward();
              }}
              className="Shopcard-carosel-left-big"
            >
              ❮
            </button>
            <button
              onClick={() => {
                ImageForwad();
              }}
              className="Shopcard-carosel-right-big"
            >
              ❯
            </button>
          </div>
        </div>
      )}

      <div style={{ width: "inherit" }}>
        <div className="ShopCard-Master">
          <div
            className="ShopCard-main"
            key={id}
            style={{ flexDirection: `${direction}` }}
          >
            {Type == "individualCard" ? (
              <div className="ShopCard-img-parrent">
                <div className="ShopCard-img">
                  {imageChangeButtons && (
                    <div style={{ position: "unset" }}>
                      <button
                        onClick={() => {
                          Imagebackward();
                        }}
                        className="Shopcard-carosel-left"
                      >
                        ❮
                      </button>
                    </div>
                  )}

                  <img
                    style={{
                      width: imgwidth ? imgwidth : "",
                      height: imgheight ? imgheight : imgwidth ? imgwidth : "",
                    }}
                    // className={`slider-image ${fade ? "fade-in" : "fade-out"}`}
                    src={imageUrl}
                    alt={dishName}
                    onClick={
                      SingleImage == "Y" ? openModal2 : PageIndividualNavigate
                    }
                  />

                  {imageChangeButtons && (
                    <div style={{ position: "unset" }}>
                      <button
                        onClick={() => {
                          ImageForwad();
                        }}
                        className="Shopcard-carosel-right"
                      >
                        ❯
                      </button>
                    </div>
                  )}

                  {isFavorite == "Y" && (
                    <p onClick={handleHeartClick}>
                      <HeartSvg
                        fillColor={fillColor}
                        strokeColor="gray"
                        height="20px"
                        width="20px"
                        position="absolute"
                        top="0"
                        left="-3"
                      />
                    </p>
                  )}
                  {offer == "Y" && (
                    <span>{offerValue ? `${offerValue} % OFF` : ""}</span>
                  )}
                  {isVeg == "veg" && (
                    <div className="veg">
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          color: "#007E1C",
                          fontSize: "26px",
                          paddingBottom: "3px",
                          paddingRight: "1px",
                        }}
                      >
                        ●
                      </div>
                    </div>
                  )}
                  {isNonVeg == "Y" && (
                    <div className="nonveg">
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                          color: "#BD0606",
                          fontSize: "26px",
                          paddingBottom: "3px",
                          paddingRight: "1px",
                        }}
                      >
                        ●
                      </div>
                    </div>
                  )}
                </div>
              </div>
            ) : (
              <div className="ShopCard-img">
                {imageChangeButtons && (
                  <div style={{ position: "unset" }}>
                    <button
                      onClick={() => {
                        Imagebackward();
                      }}
                      className="Shopcard-carosel-left"
                    >
                      ❮
                    </button>
                  </div>
                )}

                <img
                  style={{
                    width: imgwidth ? imgwidth : "",
                    height: imgheight ? imgheight : imgwidth ? imgwidth : "",
                  }}
                  className={`slider-image ${fade ? "fade-in" : "fade-out"}`}
                  src={imageUrl}
                  alt={dishName}
                  onClick={
                    SingleImage == "Y" ? openModal2 : PageIndividualNavigate
                  }
                />

                {imageChangeButtons && (
                  <div style={{ position: "unset" }}>
                    <button
                      onClick={() => {
                        ImageForwad();
                      }}
                      className="Shopcard-carosel-right"
                    >
                      ❯
                    </button>
                  </div>
                )}

                {isFavorite == "Y" && (
                  <p onClick={handleHeartClick}>
                    <HeartSvg
                      fillColor={fillColor}
                      strokeColor="gray"
                      height="20px"
                      width="20px"
                      position="absolute"
                      top="0"
                      left="-3"
                    />
                  </p>
                )}
                {offer == "Y" && (
                  <span>{offerValue ? `${offerValue} % OFF` : ""}</span>
                )}
                {isVeg == "veg" && (
                  <div className="veg">
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        color: "#007E1C",
                        fontSize: "26px",
                        paddingBottom: "3px",
                        paddingRight: "1px",
                      }}
                    >
                      ●
                    </div>
                  </div>
                )}
                {isNonVeg == "Y" && (
                  <div className="nonveg">
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        color: "#BD0606",
                        fontSize: "26px",
                        paddingBottom: "3px",
                        paddingRight: "1px",
                      }}
                    >
                      ●
                    </div>
                  </div>
                )}
              </div>
            )}

            <div
              className="ShopCard-details"
              style={{
                width:
                  direction == "row"
                    ? ShopCardDetailswidth
                      ? ShopCardDetailswidth
                      : "80vw"
                    : "",
              }}
            >
              {showQuantityModal == "Y" && (
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    width: "100%",
                    alignItems: "center",
                  }}
                >
                  <div>
                    <div className="add-quantity-modal">
                      400 g <RiArrowDownSFill size={18} />
                    </div>
                    {QuantityPrice && (
                      <p
                        style={{
                          color: "Green",
                          fontSize: "19px",
                          fontWeight: "600",
                          fontFamily: "Gilroy",
                        }}
                      >
                        <BiRupee size={17} style={{ marginRight: "-3px" }} />
                        {QuantityPrice}
                      </p>
                    )}
                  </div>

                  <div className="ShopCard-review" style={{ fontSize: "12px" }}>
                    <p>
                      <AiFillStar color="#FF7A00" /> <span>4.5</span>
                    </p>
                    <div className="reviewHover">(1 Review)</div>
                  </div>
                </div>
              )}

              {shopNameShow == "Y" && (
                <div className="ShopCard-shopName" onClick={PageNavigate}>
                  {Type == "PozoCart" ? "From" : "Visit"} <CiShop size={15} />
                  <small className="scroll-shop">{shopName}</small>
                </div>
              )}

              <div className="ShopCard-dishName-review">
                <div className="ShopCard-dishName">
                  <p
                    className="Shoopcard-productName"
                    style={{ paddingRight: "2rem !important" }}
                  >
                    {dishName}
                  </p>
                  {deliveryAvailable == "Y" && (
                    <div className="delivery">
                      <GiScooter size={18} style={{ marginBottom: "-3px" }} />{" "}
                      Delivery Available
                    </div>
                  )}
                  {ProductDescription == "Y" && (
                    <div>
                      <p
                        style={{
                          fontSize: "12px",
                          lineHeight: "1rem",
                          color: "#515151",
                          padding: "15px 10px 15px 0 ",
                        }}
                      >
                        Bluetooth Soundbar w/ 500W RMS Signature Sound,5.1
                        Channel Surround Sound,BTv5.3, Wall Mountable
                        Design,Bass&Treble Controls&Master Remote
                        Control(Premium Black)
                      </p>
                    </div>
                  )}
                  {showCartShopName == "Y" && (
                    <div className="ShopCard-shopName2">
                      From <CiShop size={15} />
                      <small className="scroll-shop">{shopName}</small>
                    </div>
                  )}
                  {Accredited == "Y" && (
                    <div className="Accredited">
                      <img src={pozologoimg} alt="pozologoimg" width={40} />
                      <span>
                        {" "}
                        <HiOutlineBadgeCheck
                          color="white"
                          size={15}
                          style={{ marginBottom: "-4px" }}
                        />
                        Accredited
                      </span>
                    </div>
                  )}
                  {InfoReview == "Y" && (
                    <div>
                      <div className="ShopCard-review">
                        <p>
                          <AiFillStar
                            style={{ fontSize: "20px" }}
                            color="#FF7A00"
                          />{" "}
                          <span style={{ fontSize: "20px" }}>4.5</span>
                        </p>
                        <div className="reviewHover">(1 Review)</div>
                        <span className="review-modal">
                          Lorem ipsum dolor sit amet consectetur adipisicing
                          elit. At quas eius quaerat rerum, accusantium quis
                          maxime reiciendis
                        </span>
                      </div>
                    </div>
                  )}
                  <div className="ShopCard-prize-btn">
                    {Type == "individualCard" && (
                      <div className="ShopCard-prize">
                        <div style={{ display: "flex", columnGap: "10px" }}>
                          {price && (
                            <p className="shopcard-price-p">
                              <BiRupee
                                size={13}
                                style={{
                                  marginBottom: "2px",
                                  marginRight: "-3px",
                                }}
                              />
                              {price}
                            </p>
                          )}
                          {HomePrice && (
                            <p>
                              From{" "}
                              <BiRupee
                                size={16}
                                style={{
                                  marginBottom: "-1px",
                                  marginRight: "-3px",
                                }}
                              />{" "}
                              {HomePrice} /-
                            </p>
                          )}

                          {CartMRP == "Y" && (
                            <span
                              className="shop-cart-mrp"
                              style={{ fontSize: "10px" }}
                            >
                              M.R.P.: <s>₹1,0099.00</s>
                            </span>
                          )}

                          {Cartoffer == "Y" && (
                            <span
                              className="shopcard-offertag"
                              style={{
                                backgroundColor: "#D42527",
                                borderRadius: "50px",
                                color: "#FFFFFF",
                                padding: "5px 10px",
                                fontWeight: "600",
                                fontFamily: "Gilroy",
                              }}
                            >
                              {offerValue ? `${offerValue} % OFF` : ""}
                            </span>
                          )}
                          {youSave && (
                            <div className="you-save">You Save ₹{youSave}</div>
                          )}
                        </div>

                        {deliveryTime && (
                          <div className="ShopCard-stopwatch">
                            <BiStopwatch size={16} /> {deliveryTime}{" "}
                            {deliveryDistance && " • " + deliveryDistance}
                          </div>
                        )}
                      </div>
                    )}
                  </div>

                  {ShowPinCodecheck == "Y" && (
                    <div className="ShopCard-pincode">
                      <div
                        style={{
                          display: "flex",
                          alignItems: "center",
                          gap: "0.3rem",
                          backgroundColor: "#f4f4f4",
                          padding: "4px 10px",
                          borderRadius: "8px",
                        }}
                      >
                        <HiLocationMarker
                          style={{ color: "#E33333", fontSize: "20px" }}
                        />
                        <input
                          placeholder="Enter Pincode"
                          type="number"
                          maxLength={5}
                          style={{
                            width: "6rem",
                            outline: "none",
                            border: "none",
                            padding: "3px 0px",
                            backgroundColor: "#f4f4f4",
                          }}
                          onInput={(e) => {
                            if (e.target.value.length > 6) {
                              e.target.value = e.target.value.slice(0, 6);
                            }
                          }}
                        />
                      </div>
                      <p style={{ fontSize: "12px", cursor: "pointer" }}>
                        Check Delivery
                      </p>
                    </div>
                  )}

                  <div
                    style={{
                      display: "flex",
                      flexDirection: "column",
                      rowGap: "2px",
                      marginTop: "0.5rem",
                    }}
                  >
                    {showSize == "Y" && (
                      <div className="size">
                        Size : <div> &nbsp;{Size}</div>
                      </div>
                    )}

                    {showColor == "Y" && (
                      <div className="color">
                        Color : <div>&nbsp; {Color}</div>
                      </div>
                    )}
                  </div>
                </div>
                {Review == "Y" && (
                  <div className="ShopCard-review">
                    <p style={{ display: "flex" }}>
                      <AiFillStar color="#FF7A00" /> <span>4.5</span>
                    </p>
                    <div className="reviewHover">(1 Review)</div>
                    <span className="review-modal">
                      Lorem ipsum dolor sit amet consectetur adipisicing elit.
                      At quas eius quaerat rerum, accusantium quis maxime
                      reiciendis
                    </span>
                  </div>
                )}
                {cartSDS == "Y" && (
                  <div className="cart-sds">
                    <p>
                      <BiBookmark
                        size={14}
                        color="#1C1C1C"
                        style={{ marginBottom: "-2px" }}
                      />{" "}
                      Save for later
                    </p>
                    <p>
                      <RiDeleteBinLine
                        size={15}
                        style={{ marginBottom: "-2px" }}
                      />{" "}
                      delete
                    </p>
                    <p>
                      <TbShare3 size={15} style={{ marginBottom: "-2px" }} />{" "}
                      share
                    </p>
                  </div>
                )}

                {SDSIcon == "Y" && (
                  <div className="SDSIcon">
                    <p style={{ display: "flex", columnGap: "10px" }}>
                      <BiBookmark
                        size={20}
                        color="#1C1C1C"
                        style={{ marginBottom: "-2px", strokeWidth: "0.1" }}
                      />
                      <RiDeleteBinLine
                        size={20}
                        strokeWidth={0.7}
                        style={{ marginBottom: "-2px", strokeWidth: "0.1" }}
                      />
                      <TbShare3
                        className="share-icon"
                        size={30}
                        style={{ marginBottom: "-2px", strokeWidth: "0.7" }}
                      />{" "}
                    </p>
                  </div>
                )}
              </div>
              <div className="ShopCard-quantity-button">
                {MRP && <s>M.R.P.:₹{MRP}</s>}
                {Buy == "Y" && <p>BUY</p>}
              </div>

              <div className="ShopCard-prize-btn">
                {Type !== "individualCard" && (
                  <div className="ShopCard-prize">
                    <div style={{ display: 'flex', columnGap: "10px" }}>
                      {price && (
                        <p className="shopcard-price-p">
                          <BiRupee size={13} style={{ marginBottom: "2px", marginRight: "-3px" }} />{price}
                        </p>
                      )}
                      {HomePrice && (
                        <p>
                          From    <BiRupee size={16} style={{ marginBottom: "-1px", marginRight: "-3px" }} />  {HomePrice} /-
                        </p>
                      )}

                      {/*================== cart MRP ============= */}
                      {CartMRP == "Y" && (
                        <span className="shop-cart-mrp" style={{ fontSize: "10px", }}>M.R.P.: <s>₹1,0099.00</s></span>
                      )}

                      {Cartoffer == "Y" && (
                        <span
                          className="shopcard-offertag"
                          style={{
                            backgroundColor: "#D42527",
                            borderRadius: "50px",
                            color: "#FFFFFF",
                            padding: "5px 10px",
                            fontWeight: "600",
                            fontFamily: "Gilroy"
                          }}>
                          {offerValue ? `${offerValue} % OFF` : ""}
                        </span>)}
                      {youSave && (
                        <div className="you-save">
                          You Save ₹{youSave}
                        </div>
                      )}
                    </div>

                    {deliveryTime && (
                      <div className="ShopCard-stopwatch">
                        <BiStopwatch size={16} /> {deliveryTime} {deliveryDistance && " • " + deliveryDistance}
                      </div>
                    )}

                  </div>
                )}


                <div style={{ display: "flex" }}>

                  {deliveryStatus == "Y" && (
                    <div className="delivery-status">
                      <TbTruckDelivery
                        size={14}
                        style={{ marginBottom: "-3px" }}
                      />
                      <span> DELIVERY &nbsp; </span>Free •{" "}
                      <span>6 | Jul | Saturday </span>
                      &nbsp;{" "}
                      <BsLightningChargeFill
                        color="#FA9600"
                        size={12}
                        style={{ marginBottom: "-2px" }}
                      />
                      Fast • <span>Today</span>
                    </div>
                  )}

                  <div className="ShopCard-btn">
                    {showChangeQuantity == "Y" && (
                      <div className="add-quantity" onClick={openModal}>
                        400 g <RiArrowDownSFill size={18} />
                      </div>
                    )}
                    {buyNow == "Y" && <p className="buy-now">BUY NOW </p>}
                    {isVisible ? (
                      <div className="add-minus">
                        <span onClick={() => handleQuantityChange(-1)}>-</span>
                        <p
                          style={{
                            fontFamily: "Gilroy",
                            fontWeight: "600",
                            fontSize: "17px",
                          }}
                        >
                          {quantity}
                        </p>
                        <span onClick={() => handleQuantityChange(1)}>+</span>
                      </div>
                    )
                      : (
                        addToCartBtn == "Y" && (
                          <>
                            <div className="buy" onClick={handleAddToCartClick}>
                              Add to Cart
                            </div>
                          </>
                        )
                      )}
                  </div>
                </div>
                <ModalPozoPublic
                  onClose={closeModal}
                  width="700px"
                  height="400px"
                  maxWidth="90%"
                  maxHeight="90%"
                  top="auto"
                  right="auto"
                  left="auto"
                  bottom="auto"
                  closeIcon={<IoCloseSharp />}
                  title="Select your Quantity"
                  isOpen={isModalOpen}
                >
                  <div>
                    {multiQty?.map((data) => (
                      <ShopCard
                        imageUrl={data.imageUrl}
                        Buy="Y"
                        isFavorite="Y"
                        offer="Y"
                        offerValue="30"
                        showQuantityModal="Y"
                        QuantityPrice="35.00"
                        isNonVeg={data?.continental == "NonVeg" && "Y"}
                        isVeg={data?.continental == "Veg" && "Y"}
                      />
                    ))}
                  </div>
                </ModalPozoPublic>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
// console.log(ShopCard.propTypes, "ShopCardShopCard");
ShopCard.propTypes = {
  id: PropTypes.number.isRequired,
  shopName: PropTypes.string.isRequired,
  dishName: PropTypes.string.isRequired,
  imageUrl: PropTypes.string.isRequired,
  price: PropTypes.string.isRequired,
  deliveryTime: PropTypes.string.isRequired,
  deliveryDistance: PropTypes.string.isRequired,
  direction: PropTypes.string.isRequired,
  QuantityPrice: PropTypes.string.isRequired,
  Color: PropTypes.string.isRequired,
  Size: PropTypes.string.isRequired,
  youSave: PropTypes.string.isRequired,
  HomePrice: PropTypes.string.isRequired,

  offer: PropTypes.bool,
  isVeg: PropTypes.bool,
  isNonVeg: PropTypes.bool,
  isFavorite: PropTypes.bool,
  addToCartBtn: PropTypes.bool,
  showCartShopName: PropTypes.bool,
  showQuantityModal: PropTypes.bool,
  showChangeQuantity: PropTypes.bool,
  deliveryAvailable: PropTypes.bool,
  Buy: PropTypes.bool,
  Review: PropTypes.bool,
  buyNow: PropTypes.bool,
  cartSDS: PropTypes.bool,
  deliveryStatus: PropTypes.bool,
  Cartoffer: PropTypes.bool,
  shopNameShow: PropTypes.bool,
  CartMRP: PropTypes.bool,
  Accredited: PropTypes.bool,
  showSize: PropTypes.bool,
  showColor: PropTypes.bool,
  youSave: PropTypes.bool,
  SDSIcon: PropTypes.bool,
};

ShopCard.defaultProps = {
  offer: true,
  isVeg: false,
  isNonVeg: false,
  isFavorite: true,
  addToCartBtn: true,
  showCartShopName: true,
  showQuantityModal: true,
  showChangeQuantity: true,
  deliveryAvailable: true,
  Buy: true,
  Review: true,
  buyNow: true,
  cartSDS: true,
  deliveryStatus: true,
  Cartoffer: true,
  shopNameShow: true,
  CartMRP: true,
  Accredited: true,
  showSize: true,
  showColor: true,
  SDSIcon: false,
};

export default ShopCard;