"use client"

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

import { BookingErrorCodeEnum } 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: string | null) => {
      switch (errorCode) {
        case BookingErrorCodeEnum.TransactionCancelled:
          return intl.formatMessage({
            defaultMessage: "You have now cancelled your payment.",
          })
        default:
          return intl.formatMessage({
            defaultMessage:
              "We had an issue processing your booking. Please try again. No charges have been made.",
          })
      }
    },
    [intl]
  )

  const errorCode = searchParams.get("errorCode")
  const errorMessage = getErrorMessage(errorCode)

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

    const toastType =
      errorCode === BookingErrorCodeEnum.TransactionCancelled
        ? "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,
  ])
}