import { Form, Modal } from "react-bootstrap";
import "./Coupons_Modal.css";
import Green_Check_Lottie from "../../../Animation/green_check_lottie/Green_Check_Lottie";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faFeatherPointed, faTags } from "@fortawesome/free-solid-svg-icons";
import Green_btn from "../../common_btn/green_btn/Green_btn";
import { useDispatch, useSelector } from "react-redux";
import { getCoupons } from "../../../../features/home/homeSlice";
import { useEffect } from "react";
import { faPaw } from "@fortawesome/free-solid-svg-icons";

const Coupons_Modal = ({
  setValue,
  setCouponData,
  onSubmit,
  data,
  ...props
}) => {
  const dispatch = useDispatch();
  const coupons = useSelector((state) => state.home.addCoupons);

  useEffect(() => {
    dispatch(getCoupons({ amount: data?.order_summary?.total_selling_price }));
  }, [dispatch, data]);

  const handelSubmit = (val) => {
    setCouponData(val);
    setValue("code", val?.code);
    props.onHide();
  };

  console.log("sfsdfdsfsd:", coupons);
  return (
    <Modal className="Coupons_Modal" size="lg" {...props} centered>
      <Modal.Body>
        <div className="title_div">
          <p className="title_text">Available Offers</p>
        </div>

        <div className="all_coupon_cards_holder">
          {coupons?.data?.length > 0 ? (
            coupons.data.map((val) => (
              <div className="coupons_holder" key={val?.id}>
                <div className="coupon_div">
                  <div
                    className="coupon_image"
                    style={{
                      // backgroundImage: `url(${process.env.NEXT_PUBLIC_IMG_URL}${val?.image})`,
                      backgroundImage: `url("${process.env.NEXT_PUBLIC_IMG_URL}${val?.image}")`,
                    }}
                  />

                  <div className="coupon_content">
                    <p className="coupon_title">{val?.name}</p>

                    <p className="coupon_discount">
                      {val?.Discount_Type?.id === 2
                        ? `${val?.discount}% OFF`
                        : `₹${val?.discount} OFF`}
                    </p>

                    <p className="coupon_minimum">
                      On minimum purchase of ₹{val?.required_amount}
                    </p>

                    <p className="coupon_info">{val?.message || val?.info}</p>
                  </div>

                  <div className="coupon_action">
                    <span className="coupon_code">{val?.code}</span>

                    <Green_btn
                      btnText="Apply"
                      onClick={() => onSubmit({ code: val.code })}
                    />
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="no_coupon_div">
              <div className="no_coupon_emoji">
                <FontAwesomeIcon icon={faFeatherPointed} />
              </div>

              <p className="no_coupon_title">Oops! No treats today!</p>

              <p className="no_coupon_text">
                Our little paws searched everywhere, but couldn't find any
                coupons for you. Check back later for some pawsome deals!
              </p>
            </div>
          )}
        </div>
      </Modal.Body>
    </Modal>
  );
};

export default Coupons_Modal;
