"use client"

import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect } from "react"
import { useIntl } from "react-intl"

import { PaymentErrorCodeEnum } from "@/constants/booking"
import { useEnterDetailsStore } from "@/stores/enter-details"

import { toast } from "@/components/TempDesignSystem/Toasts"

export function usePaymentFailedToast() {
  const updateSearchParams = useEnterDetailsStore(
    (state) => state.actions.updateSeachParamString
  )
  const intl = useIntl()
  const searchParams = useSearchParams()
  const pathname = usePathname()
  const router = useRouter()

  const getErrorMessage = useCallback(
    (errorCode: PaymentErrorCodeEnum) => {
      switch (errorCode) {
        case PaymentErrorCodeEnum.Cancelled:
          return intl.formatMessage({
            id: "You have now cancelled your payment.",
          })
        default:
          return intl.formatMessage({
            id: "We had an issue processing your booking. Please try again. No charges have been made.",
          })
      }
    },
    [intl]
  )

  const errorCodeString = searchParams.get("errorCode")
  const errorCode = Number(errorCodeString) as PaymentErrorCodeEnum
  const errorMessage = getErrorMessage(errorCode)

  useEffect(() => {
    if (!errorCode) return

    // setTimeout is needed to show toasts on page load: https://sonner.emilkowal.ski/toast#render-toast-on-page-load
    setTimeout(() => {
      const toastType =
        errorCode === PaymentErrorCodeEnum.Cancelled ? "warning" : "error"

      toast[toastType](errorMessage)
    })

    const queryParams = new URLSearchParams(searchParams.toString())
    queryParams.delete("errorCode")

    updateSearchParams(queryParams.toString())
    router.push(`${pathname}?${queryParams.toString()}`)
  }, [
    searchParams,
    pathname,
    errorCode,
    errorMessage,
    router,
    updateSearchParams,
  ])
}