import { Image,Button, notification } from "antd";
import styles from "./orderDetails.module.scss";
import cx from "classnames";


import { FC, useContext, useState } from "react";
import MyOrdersList from "../myOrdersList";
import moment from "moment";
import Link from "next/link";
import { defaultImg, s3BucketUrl } from "../../../../constants/urls";
import { BaseCal, GstCal, PriceCal } from "../../../../constants/commonFunction";
import * as AddToCardApi from "../../../../pages/api/addTocart";
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";
const OrderDetails: FC<any> = ({ orderDetails }) => {
  const { isProductListLoading, setIsProductListLoading,setCartItems } =
  useContext(shopConetxt);
  const [isBack, setIsBack] = useState(false);
  const [productInvoice, setProductInvoice] = useState<any>({});
  const router = useRouter();
  const isBackHandler = () => {
    setIsBack(true);
  };

  const buyNow = (item:any)=>{
    const val: any = localStorage.getItem("loginDetails");
    const loginRes = JSON.parse(val);
    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,
      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 !isBack ? (
    <div >
      <div className={cx(styles.headerRow, "ant-row")}>
        <div className={cx(styles.titleStyles, "ant-col-xl-22 ant-col-xs-16")}  style={{
                      fontSize: "18px",
                      fontWeight: "18px",
                      color:
                      orderDetails?.status === "processing"
                          ? "#9E510B"
                          : orderDetails?.status === "completed"
                          ? "#138A43"
                          : orderDetails?.status === "closed"
                          ? "#2158BF"
                          : orderDetails?.status === "canceled"
                          ? "#CB3939"
                          : "#fff",
                    }}>
         {orderDetails?.status === "canceled" ? "Cancelled " :orderDetails?.status === "closed"?"Returned requested " :"Delivery"}
        </div>
        <div className="ant-col-xl-2 ant-col-xs-8 px-4 cursor-pointer">
          <span onClick={isBackHandler}>&#60; Back</span>
        </div>
      </div>

      <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")}>
            Vendor Name
          </div>
          <div className={cx("ant-col-24 mb-5")}>
            {orderDetails?.vendor_name}
          </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">
            <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="ant-col-xl-12  ant-col-xs-24 mb-6">
            <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}`}
                    >
                      <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}`}
                   >
                     <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?.product?.formated_price}{" "}
                      </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>
  ) : (
    <MyOrdersList />
  );
};
export default OrderDetails;