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 { 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";

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();
  };

  return (
    <Modal className="Coupons_Modal" size="lg" {...props} centered>
      <Modal.Body>
        <div className="title_div">
          <FontAwesomeIcon icon={faTags} className="tag_icon" />
          <p className="title_text">Coupons</p>
        </div>
        {coupons?.data?.length <= 0 && "Coupon Not available"}
        {coupons?.data?.map((val) => (
          <div className="coupons_holder">
            <div className="coupon_div">
              <p className="coupon_title">{val?.name}</p>
              <p className="free_text">
                {/* Get 1 item for free{" "} */}
                <span className="save_text">
                  Save ₹
                  {val?.Discount_Type?.id === 2
                    ? (
                        ((data?.order_summary?.total_selling_price || 0) *
                          (val?.discount || 0)) /
                        100
                      ).toFixed(2)
                    : parseFloat(val?.discount || 0).toFixed(2)}{" "}
                  on this order!
                </span>
              </p>

              <div className="offer_div">
                <ul>
                  <li className="offer_text">
                    Flat{" "}
                    {val?.Discount_Type?.id === 2
                      ? `${val?.discount}%`
                      : val?.discount}{" "}
                  </li>
                  <li className="offer_text">
                    Valid on minimum purchase of ₹{val?.required_amount}{" "}
                  </li>
                  <li className="offer_text">{val?.message} </li>
                  <li className="offer_text">{val?.info}</li>
                </ul>
              </div>

              <div className="apply_btn_holder">
                <Green_btn
                  btnText={"Apply"}
                  onClick={() => onSubmit({code:val.code})}
                />
              </div>
            </div>
          </div>
        ))}

        {/* <div className="coupons_holder">
          <div className="coupon_div">
            <p className="coupon_title">F2KG</p>
            <p className="free_text">
              Get 1 item for free{" "}
              <span className="save_text">Save ₹469 on this order!</span>
            </p>

            <div className="offer_div">
              <ul>
                <li className="offer_text">Flat 100% off on 1 item </li>
                <li className="offer_text">
                  Valid on minimum purchase of ₹2000.0{" "}
                </li>
                <li className="offer_text">
                  Cannot be combined with other discounts{" "}
                </li>
                <li className="offer_text">Valid on specific items</li>
              </ul>
            </div>

            <div className="apply_btn_holder">
              <Green_btn btnText={"Apply"} />
            </div>
          </div>
        </div> */}
      </Modal.Body>
    </Modal>
  );
};

export default Coupons_Modal;
