'use client'
import { useState } from "react"
import Image from "next/image"
import { useRouter } from "next/navigation"
import { useQuery } from "@tanstack/react-query"
import PrimaryButton from "@/Component/Common/Forms/PrimaryButton"
import CustomFetch from "@/Utils/APIRequest/AxiosInstance"
import { BrandDashboardAPI } from "@/Utils/APIRequest/Endpoints"

const PaymentFailedStripe = (props) => {
    const { userDetails, translations } = props;
    const [hoveredIndex, setHoveredIndex] = useState<any>(null);
    const router = useRouter()

    // Get API
    const { data: DashboardData, isPending } = useQuery({ queryKey: [BrandDashboardAPI], queryFn: () => CustomFetch({ url: BrandDashboardAPI }, null, false), enabled: !!userDetails, refetchOnWindowFocus: false, select: (data) => data?.data });

    return (
        <>
            {DashboardData?.paymentFailedList?.length > 0 &&
                <div className="bg-red-500/10 py-4 px-3 rounded-xl flex items-center justify-between mb-5">
                    <div className="flex items-center gap-3">
                        <Image src="/assets/images/remove.png" width={21} height={21} alt="warning" className="w-6 h-6" />
                        <div>
                            <p className="text-sm text-red-500 font-medium">{translations?.paymentFailedFor} &nbsp;
                                <span className="font-semibold text-sm">
                                    {DashboardData?.paymentFailedList?.slice(0, 1).map((campaign) => campaign?.campaign?.campaign_name)}

                                    {DashboardData?.paymentFailedList?.length > 1 && (
                                        <>
                                            &nbsp;{translations?.and}&nbsp;
                                            <span
                                                className='relative underline cursor-pointer whitespace-nowrap text-sm'
                                                onMouseEnter={() => setHoveredIndex(1)}
                                                onMouseLeave={() => setHoveredIndex(null)}
                                            >
                                                {` +${DashboardData?.paymentFailedList?.length - 1} other`}
                                                {hoveredIndex === 1 && (
                                                    <div className="absolute top-full right-0 text-xs bg-white text-black p-2 rounded shadow-lg w-max z-10">
                                                        {DashboardData?.paymentFailedList?.slice(1).map((campaign, idx) => (
                                                            <div key={idx} className="flex gap-0.5 flex-col mb-1">
                                                                {idx + 1}. {campaign?.campaign?.campaign_name}
                                                                <span className="text-xs text-gray-500 block font-normal">{campaign?.comment}</span>
                                                            </div>
                                                        ))}
                                                    </div>
                                                )}
                                            </span>
                                        </>
                                    )}
                                </span>
                            </p>
                            <p className="font-medium text-xs"> {DashboardData?.paymentFailedList?.[0]?.comment} {translations?.paymentDeclinedMessage}</p>
                        </div>
                    </div>
                    <PrimaryButton customClass="!bg-red-500 !text-white px-4 !border-red-500 !text-xs !h-auto !py-2 !rounded-lg !border-0 gap-2 flex items-center" title={translations?.payNow} onClick={() => { router.push('/brand/payment') }} />
                </div>
            }
        </>
    )
}

export default PaymentFailedStripe