"use client";

import {use, useEffect, useRef} from "react";
import Link from "next/link";
import {FetchGraphqlResult} from "@/types/graphqlFetch/type";
import { OrderDetailsData } from "@/types/customer/type";
import { usePlaceOrder } from "@/utils/hooks/usePlaceOrder";
import Faqs from "./Faqs";
import { useAppDispatch } from "@/store/hooks";
import { fetchCartDetail } from "@/store/slices/cart-slice";
export default function CancelOrFailure({
    orderDetailPromise,
    paymentStatus,
    isGuest
}: {
    orderDetailPromise: Promise<FetchGraphqlResult<OrderDetailsData>>,
    paymentStatus: string,
    isGuest: boolean
}) { 
    const dispatch = useAppDispatch();
    const promiseRes = use(orderDetailPromise);
    const orderDetailRes = promiseRes.data.customerOrder ?? null;
    const {cancelOrder} = usePlaceOrder();
    const orderId = orderDetailRes?._id;
    const orderStatus = orderDetailRes?.status;
    const cancelOrderRef = useRef(false);
    useEffect(() => {
        console.log('isGuest ---- ',isGuest);
        if(isGuest && !cancelOrderRef.current) {
            
            // 如果是游客，取消订单
            console.log('游客，取消订单 ',orderId,orderStatus,cancelOrderRef.current);
            if(orderId && orderStatus !=='canceled' && !cancelOrderRef.current) {
                console.log('cancelOrder run ');
                cancelOrder({
                    orderId: Number(orderId),
                }).then(() => {
                    // 重新获取购物车
                    dispatch(fetchCartDetail());
                }).catch(() => {});
            }
            cancelOrderRef.current = true;
        }
    }, [orderId,orderStatus]);
    return (
        <div className="box-border px-4 w-full">
            {paymentStatus === 'failure' &&
                <>
                    <div className="w-12 h-12 mx-auto mt-9">
                        <svg className="failure block w-full h-full" width="200" height="200" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27635"><path d="M736 332.8L556.8 512l179.2 179.2-44.8 44.8L512 556.8l-179.2 179.2-44.8-44.8L467.2 512 288 332.8l44.8-44.8L512 467.2l179.2-179.2 44.8 44.8z" p-id="27636"></path><path d="M512 0a512 512 0 1 1 0 1024A512 512 0 0 1 512 0z m0 64a448 448 0 1 0 0 896A448 448 0 0 0 512 64z" p-id="27637"></path></svg>
                    </div>
                    <p className="text-ly-16 text-center mt-6">
                        {isGuest ?
                            "payment Failed! Your order has been cancelled."
                        :
                            "Payment Failed! You can try again."
                        }
                        
                    </p>
                </>
            }
            {paymentStatus === 'cancel' &&
                <>
                    <div className="w-12 h-12 mx-auto mt-9">
                        <svg className="warning block w-full h-full" width="200" height="200" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24135"><path d="M874.6496 512a362.6496 362.6496 0 1 0-725.3504 0 362.6496 362.6496 0 0 0 725.3504 0z m64 0a426.6496 426.6496 0 1 1-853.3504 0 426.6496 426.6496 0 0 1 853.3504 0z m-458.7008 85.3504V298.7008h64v298.6496h-64z m0 128v-64h64v64h-64z" p-id="24136"></path></svg>
                    </div>
                    <p className="text-ly-16 text-center mt-6">
                        {isGuest ?
                            "payment cancelled! Your order has been cancelled."
                        :
                            "Payment cancelled! You can try again."
                        }
                        
                    </p>
                </>
            }

            <p className="text-ly-16 mt-4 flex justify-center">
                <span className="px-3.75 leading-ly-28 bg-[#f0fffa]">Order #{orderId}</span>
            </p>
            {/* <p className="text-ly-12 text-center mt-4 leading-ly-22">
                Hello, {orderDetailRes?.customerFirstName} <br/>
                Thank you so much for your order !<br/>
                We’ll get started on your order very soon!<br/>
                You’ll receive an order confirmation email with details of your order in an hour, please be sure to check your email and confirm your order, that is very important for us to process your order.
            </p> */}
            {isGuest ?
                <Link href="/" className="mt-6 flex justify-center items-center h-12 border-1 rounded-3xl text-ly-14">
                    Continue Shopping
                </Link>
            :
                <Link href={`/checkout/continuetopay?orderid=${orderId}`} className="mt-6 flex justify-center items-center h-12 border-1 rounded-3xl text-ly-14">
                    Continue To Pay
                </Link>
            }
            <div className="box-border w-full mt-6">
                <Faqs />
            </div>
        </div>
    );
}