import React, { FC, useContext, useEffect, useState } from "react";
import cx from "classnames";
import styles from "./checkoutPage.module.scss";
import {
  Form,
  Input,
  Button,
  Radio,
  Space,
  Select,
  Modal,
  Image,
  Spin,
  notification,
} from "antd";
import MediaQuery from "react-responsive";
import Invoice from "../Invoice/Invoice";
const { Option } = Select;
import * as CartApi from "../../pages/api/cart";
import * as OrderApi from "../../pages/api/order";
import CustomProgressBar from "./ProgressBar";
import _ from "lodash";
import Router,{ useRouter } from "next/router";
import useRazorpay from "react-razorpay";
import { CheckCircleFilled,LeftOutlined } from "@ant-design/icons";
import shopConetxt from "../../context/shopConetxt";
import OtpInput from "react-otp-input";
import Loading from "../Loading";
const { confirm } = Modal;
const PaymentContainer: FC<any> = ({productInvoice}) => {
  const {
    cart,
    setCartItems,
    setIsCartLoading,
    productQuantity,
    setProductQuantity,
  } = useContext(shopConetxt);
  const [form] = Form.useForm();
   const [productInvoice1, setProductInvoice1] = useState({});
  const [loginRes, setLoginRes] = useState<any>({});
  const [paymentSelect, setPaymentSelect] = useState("razorpay");
  const [address, setAddress] = useState<any>({});
  const [orderSuccess, setOrderSuccess] = useState(false);
  const [orderId, setOrderId] = useState(0);
  const [isCOD, setIsCOD] = useState(false);
  const [loading, setLoading] = useState(false);
  const [otp, setOtp] = useState("");

  const router = useRouter();
  const Razorpay = useRazorpay();
  const [state, setState] = useState({
    isRouteChanging: false,
    loadingKey: 0,
  });
  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details: any = JSON.parse(val);
    // console.log(details, "details");

    setLoginRes(details);

    const shipMent: any = localStorage.getItem("shipment");
    const finalShip: any = JSON.parse(shipMent);

    setAddress(finalShip.data);
    
    if (finalShip.data.methods.length==1){
      if(finalShip.data.methods?.[0]?.method=="moneytransfer"){
        setPaymentSelect("moneytransfer");
      }
    }
    // setProductInvoice(finalShip.data?.cart);
    // CartApi.cartShipping1(details.token).then((shipD) => {
    //   setAddress(shipD.data);
    // });
    console.log(finalShip,"finalShip")
  }, []);

  useEffect(()=>{
    setProductInvoice1(productInvoice);

    // console.log(productInvoice,"productInvoice")
  },[productInvoice]);

  const handleRouteChangeStart = () => {
    setState((prevState) => ({
      ...prevState,
      isRouteChanging: true,
      loadingKey: prevState.loadingKey ^ 1,
    }));
  };
  const handleRouteChangeEnd = () => {
    setState((prevState) => ({
      ...prevState,
      isRouteChanging: false,
    }));
  };

  const paymentSubmit = () => {
    handleRouteChangeStart();
    const params = {
      token: loginRes.token,
      paymentMethod: paymentSelect,
    };
    CartApi.cartPayment(params).then((res) => {
      CartApi.processPayment(params).then((response) => {
        if (response.proceedPayment) {
          const options = response.data;
          options.handler = function (responseOptions: any) {
            setLoading(true);
            // handleRouteChangeStart();
            
            OrderApi.verifyPayment({
              token: loginRes.token,
              payment_response: responseOptions,
            }).then((response) => {
             

              if (response?.status) {
                handleRouteChangeEnd();
                setOrderSuccess(true);
                setLoading(false);
                // router.push({
                //   pathname: `/orderConfirmation`,
                // });
                setProductQuantity([]);
                setCartItems({});
              } else {
                handleRouteChangeEnd();
                setLoading(false);
                notification.error({ message: response?.message });
              }
            });
          }
          
          const final_options = { ...options, theme: { color: "#9170e1" }, modal:{ondismiss: function(){
            notification.error({ message: "Your Payment Cancelled and Try Again " });
            handleRouteChangeEnd();
            setLoading(false);
          }} };
          const rzp1 = new Razorpay(final_options);

          rzp1.on("payment.failed", function (response: any) {
             
          })

         
          setTimeout(() => {
              rzp1.open();
            
          },10);
        } else {
          showConfirm();
        }
      });
    });
  };

  const changeOtp = (e: any) => {
    setOtp(e);
  };

  const showConfirm = () => {
    confirm({
      title: 'Do you want to proceed?',
      content: 'Shipping charges will be applicable based on the weight of your item',
      onOk() {
        OrderApi.orderSave(loginRes.token).then((res) => {
          setOrderSuccess(true);
          setProductQuantity([]);
          setCartItems({});
          // router.push({
          //   pathname: `/orderConfirmation`,
          // });

          CartApi.cartFetch(loginRes.token).then((res) => {
            if (res.data !== null) {
              // setProductInvoice(res.data);
            }
          });
        });
        // Add your yes action here
      },
      onCancel() {
        handleRouteChangeEnd();
        console.log('Cancel clicked');
        // Add your cancel action here
      },
      okText: 'Yes',
      cancelText: 'Cancel',
    });
  };


  const changePayment = (e: any) => {
    setPaymentSelect(e.target.value);
    return;
    if (e.target.value === "cashondelivery") {
      const params = {
        token: loginRes.token,
        paymentMethod: paymentSelect,
      };
      CartApi.cartPayment(params).then((res) => {
        CartApi.processPayment(params).then((response) => {
          OrderApi.orderSave(loginRes.token).then((res) => {
            handleRouteChangeEnd();
            setProductQuantity([]);
            setCartItems({});
            setOrderSuccess(true);
            CartApi.cartFetch(loginRes.token).then((res) => {
              if (res.data !== null) {
                // setProductInvoice(res.data);
              }
            });
          });
        });
      });
    }
  };
  const codSubmit = () => {
    if (otp === "") {
      notification.error({ message: "Please Enter OTP" });
    } else {
      const params = {
        token: loginRes.token,
        paymentMethod: paymentSelect,
      };
      CartApi.cartPayment(params).then((res) => {
        CartApi.processPayment(params).then((response) => {
          OrderApi.orderSave(loginRes.token).then((res) => {
            setProductQuantity([]);
            setCartItems({});
            setOrderSuccess(true);
            // router.push({
            //   pathname: `/orderConfirmation`,
            // });
            CartApi.cartFetch(loginRes.token).then((res) => {
              if (res.data !== null) {
                // setProductInvoice(res.data);
              }
            });
          });
        });
      });
    }
  };

  const backButton =()=>{
    Router.push("/checkout");
  }
  const img = (
    <Image
      src={"/images/loaderindispare.gif"}
      width={"100%"}
      style={{ background: "#fff", width: "200px", height: "100px" }}
    />
  );

  const backRoute = () => {
    router.back();
  }; 
  return (
    <>
      <Loading isRouteChanging={state.isRouteChanging} key={state.loadingKey} />
      <Spin tip="Loading" size="large" spinning={loading}>
      <Button
        className={cx("mx-10", styles.buckButton)}
        style={{ fontSize: "20px",cursor:"pointer",alignItems:"center",justifyContent:"center",display:'flex' }}
        type="link"
        onClick={backRoute}
        icon={<LeftOutlined />}
      >
        
        Back
      </Button>
      <div className={styles.paymentContainer}>
        <MediaQuery maxWidth={768.98}>
          <div className={cx("text-center", styles.checkoutPageTitle)}>
            Review & Payments
          </div>
        </MediaQuery>
        <div className={cx("m-auto", styles.progressBar)}>
          <CustomProgressBar progress={100} />
        </div>
        {!isCOD ? (
          <div>
            <div className={cx("mx-8", styles.sectionHeader)}>Payment Type</div>
            <div className={cx("ant-row", styles.mainContainer)}>
              <div
                className={cx(
                  "ant-col ant-col-xl-16 ant-col-md-24 ant-col-xs-24"
                )}
              >
                <div className={cx("ant-row", styles.leftContainer)}>
                  <div
                    className={cx(
                      "ant-col ant-col-xl-12 ant-col-md-12 ant-col-xs-24"
                    )}
                  >
                    <div className={cx(styles.paymentMethodContainer)}>
                      <div className={styles.paymentMethodRadioGroup}>
                        <Radio.Group
                          value={paymentSelect}
                          onChange={(evt) => changePayment(evt)}
                        >
                          <Space direction="vertical">
                            {address?.methods
                              ? address.methods.filter((payOpt: any) => payOpt.method !== "cashondelivery").map(
                                  (payOpt: any, idx: number) => {
                                    return (
                                      <Radio
                                        className={styles.paymentOption}
                                        value={payOpt.method}
                                        key={idx}
                                      >
                                        {payOpt.description=="Razorpay"?"Pay Now":payOpt.description}
                                      </Radio>
                                    );
                                  }
                                )
                              : null}
                          </Space>
                        </Radio.Group>
                      </div>
                    </div>
                  </div>
                  <div
                    className={cx(
                      "ant-col ant-col-xl-12 ant-col-md-12 ant-col-xs-24"
                    )}
                  >
                    {/* <div className={cx("py-3 mt-6", styles.paymentText)}>
                      Debit Card / Credit Card
                    </div>
                    <Image
                      src={"/images/card.png"}
                      width={"100%"}
                      height={"70px"}
                      preview={false}
                    />
                    <div className={cx("py-3 mt-6", styles.paymentText)}>
                      Net Banking
                    </div>
                    <div className="ant-row justify-center items-center">
                      <Image
                        src={"/images/hdfc.png"}
                        height={"70px"}
                        preview={false}
                        className={"px-2"}
                      />
                      <Image
                        src={"/images/sbi.png"}
                        height={"70px"}
                        preview={false}
                        className={"pl-2"}
                      />
                      <Image
                        src={"/images/kotak.png"}
                        height={"70px"}
                        preview={false}
                        className={"pl-2"}
                      />
                      <Image
                        src={"/images/yes.png"}
                        height={"70px"}
                        preview={false}
                        className={"pl-2"}
                      />
                    </div>
                    <div className={cx("py-3 mt-6", styles.paymentText)}>
                      UPI Payments
                    </div>
                    <div className="ant-row justify-center items-center">
                      <Image
                        src={"/images/phonepay.png"}
                        width={"90px"}
                        preview={false}
                        className={"px-2"}
                      />
                      <Image
                        src={"/images/gpay.png"}
                        width={"90px"}
                        preview={false}
                        className={"pl-2"}
                      />
                      <Image
                        src={"/images/paytm.png"}
                        width={"90px"}
                        preview={false}
                        className={"pl-2"}
                      />
                    </div> */}
                  </div>
                </div>
                <MediaQuery minWidth={769}>
                  <div className={cx("mx-4 flex justify-between")}>
                  <Button
                      className={cx("my-4", styles.buckButton)}
                      type="link"
                      onClick={backButton}
                    >
                      Back
                    </Button>
                    
                    <Button
                      className={cx("my-4", styles.nextButton)}
                      type="primary"
                      onClick={paymentSubmit}
                    >
                      {paymentSelect=="razorpay"?"Pay & Confirm your Order":"Confirm your Order"}
                    </Button>
                    
                  </div>
                </MediaQuery>
              </div>

              <div
                className={cx(
                  "ant-col ant-col-xl-8 ant-col-md-12 ant-col-xs-24",
                  styles.paddingInvoice
                )}
              >
                <Invoice details={productInvoice1} />

                <div className={cx("p-4 my-4", styles.shippingAddressCard)}>
                  <div className="m-2 flex justify-between">
                    <div className={styles.addressCardTitle}>
                      Shipping Address
                    </div>
                  </div>
                  <div className="m-2">
                    <div>
                      {address?.cart?.shipping_address?.first_name +
                        " " +
                        address?.cart?.shipping_address?.last_name}
                    </div>
                    <div>{address?.cart?.shipping_address?.address1}</div>
                    <div>{address?.cart?.shipping_address?.city}</div>
                    <div>{address?.cart?.shipping_address?.state}</div>
                    <div>{address?.cart?.shipping_address?.postcode}</div>
                    <div>{address?.cart?.shipping_address?.phone}</div>
                  </div>
                </div>
                <div className={cx("p-4 my-4", styles.shippingAddressCard)}>
                  <div className="m-2 flex justify-between">
                    <div className={styles.addressCardTitle}>
                      Billing Address
                    </div>
                  </div>
                  <div className="m-2">
                    <div>
                      {address?.cart?.billing_address?.first_name +
                        " " +
                        address?.cart?.billing_address?.last_name}
                    </div>
                    <div>{address?.cart?.billing_address?.address1}</div>
                    <div>{address?.cart?.billing_address?.city}</div>
                    <div>{address?.cart?.billing_address?.state}</div>
                    <div>{address?.cart?.billing_address?.postcode}</div>
                    <div>{address?.cart?.billing_address?.phone}</div>
                  </div>
                </div>
              </div>
            </div>

           
             
           
            <MediaQuery maxWidth={768.98}>
            <div className={cx("mx-4 flex justify-between")}>
                  <Button
                      className={cx("my-4", styles.buckButton)}
                      type="link"
                      onClick={backButton}
                    >
                      Back
                    </Button>
                <Button
                  className={cx("my-4", styles.nextButton)}
                  type="primary"
                  onClick={paymentSubmit}
                >
                 {paymentSelect=="razorpay"?"Pay & Confirm your Order":"Confirm your Order"}
                </Button>
              </div>
            </MediaQuery>
          </div>
        ) : (
          <div className={styles.otpEnterMain}>
            <h1 className={styles.headerTitle}>Cash on Delivery - COD</h1>
            <h5 className={styles.otpText}>
              OTP is Sent to Your Number{" "}
              <span className={styles.headerMainSubTitle}>
                {loginRes?.data?.phone}
              </span>
            </h5>
            <OtpInput
              value={otp}
              onChange={changeOtp}
              numInputs={6}
              isInputNum={true}
              shouldAutoFocus={true}
              separator={<span>&nbsp;&nbsp;</span>}
            />
            <Button
              type="primary"
              block
              className={cx("mt-8", styles.buttonLogin)}
              onClick={codSubmit}
            >
              Order Now
            </Button>
            <Button type="link" style={{ textAlign: "left", fontSize: "12px" }}>
              Resend OTP
            </Button>
          </div>
        )}

        <Modal
          width={400}
          style={{ width: "400px" }}
          visible={orderSuccess}
          onOk={() => {
            setProductQuantity([]);
            setCartItems({});
            setOrderSuccess(false);
            router.replace({
              pathname: `/customerDashboard/customerDashboard`,
              query: { val: "My Orders" },
            });
          }}
          onCancel={() => {
            setProductQuantity([]);
            setCartItems({});
            setOrderSuccess(false);
            router.replace({
              pathname: `/customerDashboard/customerDashboard`,
              query: { val: "My Orders" },
            });
          }}
          footer={null}
          destroyOnClose={true}
        >
          <div className={styles.modalContent}>
            <CheckCircleFilled
              style={{ color: "#291C61", fontSize: "xxx-large" }}
            />
            <div className={styles.title}>We've received your order!</div>
            <div className={styles.subTitle}>
              Thanks for making the payment. You can track you order by clicking
              below.
            </div>
            <Button
              onClick={() => {
                setProductQuantity([]);
                setCartItems({});
                router.replace({
                  pathname: `/customerDashboard/customerDashboard`,
                  query: { val: "My Orders" },
                });
              }}
              type="primary"
              ghost
            >
              Review Order
            </Button>
          </div>
        </Modal>

        {/* <div className={styles.stickyCheckoutFooter}>
        <Button className={styles.mobilePaymentButton} type="primary">
          Pay & Confirm your Order
        </Button>
      </div> */}
      </div>
      </Spin>
    </>
  );
};

export default PaymentContainer;