import { Image, Button, notification, Skeleton } from "antd";
import styles from "./invoiceView.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";
import { useMediaQuery } from "react-responsive";

const InvoiceView: FC<any> = ({ orderDetails, back, isLoading }) => {
    const isMobile = useMediaQuery({ maxWidth: 767.68 });
    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")}

                >
                    Invoice 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-9",
                            styles.detailsDisplay
                        )}
                    >
                        <div className={styles.subDetails}>Seller Code</div>
                        <span className={styles.subDetailsValue}>{orderDetails?.seller_code}</span>
                    </div>
                    <div
                        className={cx(
                            "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-xl-6",
                            styles.detailsDisplay
                        )}
                    >
                        <div className={styles.subDetails}>Shipping</div>
                        <span className={styles.subDetailsValue} style={{ color: "#198084" }}>
                            {orderDetails?.shipping_type}
                        </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}>Invoiced Date</div>
                        <span className={styles.subDetailsValue}>
                            {orderDetails?.invoiced_date}
                        </span>
                    </div>
                </div>

                {/* <div className="ant-row">
          <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>
          <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>
                <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>
                <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={styles.tableView}>
                    <div className={cx("ant-row mb-5")}>
                        <div className={cx("ant-col ant-col-xs-6 ant-col-md-6 ant-col-xl-6", styles.tableLabel)}> SKU</div>
                        <div className={cx("ant-col ant-col-xs-8 ant-col-md-8 ant-col-xl-8", styles.tableLabel)} style={{ paddingLeft: isMobile ? "12px" : 0 }}>Product Name</div>
                        <div className={cx("ant-col ant-col-xs-4 ant-col-md-4 ant-col-xl-4", styles.tableLabel)}>Price</div>
                        <div className={cx("ant-col ant-col-xs-2 ant-col-md-2 ant-col-xl-2", styles.tableLabel)}>Qty</div>
                        <div className={cx("ant-col ant-col-xs-4 ant-col-md-4 ant-col-xl-4", styles.tableLabel)}>Subtotal</div>
                    </div>
                    <div>
                        {orderDetails?.item_details?.map((data: any, idx: number) => {
                            return (
                                <div className={cx("ant-row mb-8", styles.borderTable)} key={idx}>
                                    <div className={cx("ant-col ant-col-xs-6 ant-col-md-6 ant-col-xl-6", styles.tableValue)}> {data?.sku}</div>
                                    <div className={cx("ant-col ant-col-xs-8 ant-col-md-8 ant-col-xl-8", styles.tableValue)} style={{ paddingLeft: isMobile ? "12px" : 0 }}> {data?.item_name}</div>
                                    <div className={cx("ant-col ant-col-xs-4 ant-col-md-4 ant-col-xl-4", styles.tableValue)}> {data?.price}</div>
                                    <div className={cx("ant-col ant-col-xs-2 ant-col-md-2 ant-col-xl-2", styles.tableValue)}> {data?.qty}</div>
                                    <div className={cx("ant-col ant-col-xs-4 ant-col-md-4 ant-col-xl-4", styles.tableValue)}> {data?.ietm_subtotal}</div>
                                </div>
                            )
                        })
                        }
                    </div>
                </div>
                <div className="ant-row mt-6">
                    <div className="ant-col ant-col-8">
                        <div className={styles.pricelabel}>Subtotal</div>
                        <div className={styles.priceValue}>{orderDetails?.subtotal}</div>
                    </div>
                    <div className="ant-col ant-col-8">
                        <div className={styles.pricelabel}>Shipping & Handling</div>
                        <div className={styles.priceValue}>{orderDetails?.shipping_charges}</div>
                    </div>
                    <div className="ant-col ant-col-8">
                        <div className={styles.pricelabel}>Discount</div>
                        <div className={styles.priceValue}>{orderDetails?.discount}</div>
                    </div>
                </div>
                <div className="ant-row  mt-6">
                    <div className="ant-col ant-col-8">
                        <div className={styles.pricelabel}>Tax</div>
                        <div className={styles.priceValue}>{orderDetails?.tax}</div>
                    </div>
                    <div className="ant-col ant-col-8">
                        <div className={styles.pricelabel}>Grand Total</div>
                        <div className={styles.priceValue}>{orderDetails?.grand_total}</div>
                    </div>
                    <div className="ant-col ant-col-8">
                        <div className={styles.pricelabel}>Total Paid</div>
                        <div className={styles.priceValue}>{orderDetails?.grand_total}</div>
                    </div>
                </div>

                <div className="ant-row mb-5 mt-5">
                    <div className="ant-col-xl-10 ant-col-xs-24 mb-6 pr-3" >
                        <h2 className={styles.headerDetails}>Billing Information</h2>
                        <div className={styles.valueofAddress}>{orderDetails?.billing_address?.address1}</div>
                        <div className={styles.valueofAddress}>{orderDetails?.billing_address?.city}</div>
                        <div> className={styles.valueofAddress}{orderDetails?.billing_address?.state}</div>
                        <div className={styles.valueofAddress}>{orderDetails?.billing_address?.postcode}</div>
                    </div>
                    <div className={cx("ant-col-xl-10  ant-col-xs-24 mb-6 ", styles.paddingAddress)}>
                        <h2 className={styles.headerDetails}>Shipping Information</h2>
                        <div className={styles.valueofAddress}>{orderDetails?.shipping_address?.address1}</div>
                        <div className={styles.valueofAddress}>{orderDetails?.shipping_address?.city}</div>
                        <div className={styles.valueofAddress}>{orderDetails?.shipping_address?.state}</div>
                        <div className={styles.valueofAddress}>{orderDetails?.shipping_address?.postcode}</div>
                    </div>
                    <div className={cx("ant-col-xl-4  ant-col-xs-24 mb-6 ", styles.paddingAddress)}>
                        <h2 className={styles.headerDetails}>Payment Method</h2>
                        <div className={styles.valueofAddress}>{orderDetails?.payment_method}</div>
                    </div>
                </div>


            </div>}
        </div >
    );
};

export default InvoiceView;