import { Image, Button, notification, Skeleton } from "antd";
import styles from "./orderDetailsEmail.module.scss";
import cx from "classnames";
import { FC, useContext, useEffect, useState } from "react";
import moment from "moment";
import Link from "next/link";
import { APIKEY, baseUrl, defaultImg, s3BucketUrl } from "../../constants/urls";
import { BaseCal, GstCal, PriceCal } from "../../constants/commonFunction";
import * as AddToCardApi from "../../pages/api/addTocart";
import * as CommonApi from "../../pages/api/common";
import * as ShipApi from "../../pages/api/ship";
import * as CartApi from "../../pages/api/cart";
import InternalPageHeader from "../internalPageHeader/InternalPageHeader";
import { useRouter } from "next/router";
import shopConetxt from "../../context/shopConetxt";
import _ from "lodash";
import Geocode from "react-geocode";

const OrderDetailsEmail: FC<any> = ({ orderDetails, back, isLoading }) => {
  const { isProductListLoading, setIsProductListLoading, setCartItems } =
    useContext(shopConetxt);
  const router = useRouter();
  const [productInvoice, setProductInvoice] = useState<any>({});
  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  const [currentAddress, setCurrentAddress] = useState<any>({});
  const [loginRes, setLoginRes] = useState<any>({});
  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const loginDetails = JSON.parse(val);

    setLoginRes(loginDetails);
    const token = loginDetails?.token;

    const cityPincode = localStorage.getItem("PinCode");
    if (!loginDetails?.data) {
      if (cityPincode !== null) {
        Geocode.setApiKey(APIKEY);
        Geocode.enableDebug();
        Geocode.fromAddress(cityPincode).then(({ results }) => {
          const { lat, lng } = results[0].geometry.location;
          setLatitude(lat);
          setLongitude(lng);
        });
      }
      CommonApi.getRequestWithToken(
        `${baseUrl}/api/customer-pincodes/get-data?token=true&customer_id=${loginDetails?.data?.id}`,
        loginDetails?.token
      ).then((Selectres) => {
        setCurrentAddress(Selectres?.data?.data);
      });
    }
  }, []);

  const buyNow = (item: any) => {

    const cityPincode = localStorage.getItem("PinCode");
    const lat = loginRes?.data ? currentAddress?.latitude : latitude;
    const long = loginRes?.data ? currentAddress?.longitude : longitude;
    CommonApi.getRequest(
      `${baseUrl}/api/inventory-by-pincode?product_id=${item.additional.product_id}&pincode=${cityPincode}`
    ).then((res) => {
      ShipApi.shippingAvailableCheckingAPI(
        loginRes?.token,
        res?.data?.data?.inventory_details?.pincode,
        cityPincode,
        item.additional.item_weight * 1
      ).then((shipRocket) => {
        const params = {
          product_id: item.additional.product_id,
          quantity: 1,
          token: loginRes?.token,
          mp_seller_id: item.additional.mp_seller_id,
          vendor_id: item.additional.vendor_id,
          shipCharge: shipRocket?.rate,
          seller_lat: res?.data?.data?.inventory_details?.latitude,
          seller_lang: res?.data?.data?.inventory_details?.longitude,
          customer_lat: lat,
          customer_lang: long,
          item_weight: item.additional.item_weight,
          customer_pincode: cityPincode,
          seller_pincode: res?.data?.data?.inventory_details?.pincode,
          shipping_type: 0
        };

        AddToCardApi.addToCart(params).then((res) => {
          if (res?.message) {
            notification.open({
              message: res?.message,
              duration: 1,
            });
            const tokenData: any = !_.isEmpty(loginRes) ? loginRes.token : null;
            CartApi.cartFetch(tokenData).then((cartRes) => {
              if (cartRes.data !== null) {
                setProductInvoice(cartRes.data);
                setCartItems(cartRes.data);
                router.push("/cart");
                <InternalPageHeader item={cartRes.data.items.length} />;
              }
            });
          } else {
            notification.error({
              message: res?.error,
              duration: 0,
            });
          }
        });
      });
    });
  };

  return (
    <div className={styles.detailsPageContainer}>
      <div className={cx(styles.headerRow, "ant-row")}>
        <div
          className={cx(styles.titleStyles, "ant-col-xl-20 ant-col-xs-16")}

        >
          Order Details
        </div>
        <div className="ant-col-xl-4 ant-col-xs-8 px-4 cursor-pointer " style={{display:"flex",justifyContent:"flex-end"}}>
          <span onClick={back}>&#60; Back</span>
        </div>
      </div>

      {isLoading ? <Skeleton /> : <div className={styles.detailsContainer}>
        {/* order basic details */}
        <div className="ant-row mb-6">
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-xl-6",
              styles.detailsDisplay
            )}
          >
            <div className={styles.subDetails}>Order Placed</div>
            <span className={styles.subDetailsValue}>
              {moment(orderDetails?.created_at).format("DD-MM-YYYY")}
            </span>
          </div>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-xl-9",
              styles.detailsDisplay
            )}
          >
            <div className={styles.subDetails}>Order ID</div>
            <span className={styles.subDetailsValue}>#{orderDetails?.id}</span>
          </div>
          <div
            className={cx(
              "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-xl-9",
              styles.detailsDisplay
            )}
          >
            <div className={styles.subDetails}>Order Total</div>
            <span className={styles.subDetailsValue}>
              {orderDetails?.formated_base_grand_total}
            </span>
          </div>
        </div>

        <div className="ant-row">
          {/* payment methods */}
          <div className="ant-col ant-col-xs-24 ant-col-xl-6">
            <div className={cx(styles.headerDetails)}>Payment Method</div>
            <div className={cx("ant-col-24 mb-5")}>
              {orderDetails?.payment_title}
            </div>
          </div>
          {/* Vendor Name */}
          <div className="ant-col ant-col-xs-24 ant-col-xl-9">
            <div className={cx(styles.headerDetails, "ant-col-24")}>
              Seller Code
            </div>
            <div className={cx("ant-col-24 mb-5")}>
              {orderDetails?.items?.[0]?.additional?.seller_code}
            </div>
          </div>

          <div className="ant-col ant-col-xs-24 ant-col-xl-9">
            {orderDetails?.status === "canceled" ? (
              <div>
                {/* Cancel Reason */}
                <div className={cx(styles.headerDetails, "ant-col-24")}>
                  Cancel Reason
                </div>
                <div className={cx("ant-col-24 mb-5")}>
                  {orderDetails?.cancel_reason}
                </div>
              </div>
            ) : orderDetails?.status === "closed" ? (
              <div>
                {/* Return Reason */}
                <div className={cx(styles.headerDetails, "ant-col-24")}>
                  Return Reason
                </div>
                <div className={cx("ant-col-24 mb-5")}>
                  {orderDetails?.return_reason}
                </div>
              </div>
            ) : null}
          </div>
        </div>

        {/* billing shipping */}
        <div className="ant-row mb-5">
          <div className="ant-col-xl-12 ant-col-xs-24 mb-6 pr-3" >
            <h2 className={styles.headerDetails}>Billing Information</h2>
            <div>{orderDetails?.billing_address?.address1}</div>
            <div>{orderDetails?.billing_address?.city}</div>
            <div>{orderDetails?.billing_address?.state}</div>
            <div>{orderDetails?.billing_address?.postcode}</div>
          </div>
          <div className={cx("ant-col-xl-12  ant-col-xs-24 mb-6 ", styles.paddingAddress)}>
            <h2 className={styles.headerDetails}>Shipping Information</h2>
            <div>{orderDetails?.shipping_address?.address1}</div>
            <div>{orderDetails?.shipping_address?.city}</div>
            <div>{orderDetails?.shipping_address?.state}</div>
            <div>{orderDetails?.shipping_address?.postcode}</div>
          </div>
        </div>
        <div className="ant-row mb-5">
          <div className="ant-col-24">
            <h2 className={styles.headerDetails}>Order Details</h2>
          </div>
          <div className="ant-col-xl-16 ant-col-xs-24">
            {orderDetails?.items?.map((data: any, idx: number) => {
              return (
                <div className="ant-row mb-8" key={idx}>
                  <div className="ant-col-xl-7 ant-col-xs-12">
                    <Link href={`/products/details/${data?.product?.url_key}-${data?.product?.id}`}>
                      <a>
                        <Image
                          src={
                            data?.product?.base_image?.path === undefined
                              ? data?.product?.base_image?.large_image_url
                              : s3BucketUrl + data?.product?.base_image?.path
                          }
                          preview={false}
                          width="93px"
                          height="93px"
                        />
                      </a>
                    </Link>
                  </div>
                  <div className="ant-col-12">
                    <div className="ant-row">
                      <Link href={`/products/details/${data?.product?.url_key}-${data?.product?.id}`}>
                        <a>
                          <h3 className={cx(styles.productName)}>
                            {data?.product?.name}
                          </h3>
                        </a>
                      </Link>
                    </div>
                    <div className="ant-row">
                      <span>Qty &nbsp;&nbsp;{data?.qty_ordered}</span>
                    </div>
                    <div className="ant-row">
                      <span className="ant-col-xl-12 ant-col-xs-24 pt-3">
                        {data?.formated_price}{" "}
                      </span>
                      <span>Delivery By : {data?.additional?.shipping_type == 1
                        ? "Lightening Delivery"
                        : data?.additional?.shipping_type == 2 ? "Indispare Delivery" : "Regular Delivery"}</span>

                      <span className="ant-col-xl-12 ant-col-xs-24 pt-3">
                        <Button
                          type="primary"
                          ghost
                          onClick={() => {
                            buyNow(data);
                          }}
                        >
                          Buy again
                        </Button>
                      </span>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          {/*pricing Details*/}
          <div className={cx("ant-col-sm-24 ant-col-xl-8")}>
            <div className={cx(styles.billContainer, "ant-row")}>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-20">
                Sub Total
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-4">
                {orderDetails?.formated_sub_total}
                {/* ₹{PriceCal(parseFloat(orderDetails?.base_tax_amount),parseFloat(orderDetails?.base_grand_total))} */}
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-20">
                Discount
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-4">
                {orderDetails?.formated_base_discount_amount}
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-20">
                Taxable Amount
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-4">
                {orderDetails?.formated_base_tax_amount}
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-20">
                Shipping Amount
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-4">
                {orderDetails?.formated_base_shipping_amount}
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-20">
                Total
              </div>
              <div className="ant-col-xs-12 ant-col-sm-12 ant-col-xl-4 fs-6">
                {orderDetails?.formated_grand_total}
              </div>
            </div>
          </div>
        </div>
      </div>}
    </div>
  );
};

export default OrderDetailsEmail;