"use client"

import { useRouter } from "next/navigation"
import { useEffect } from "react"

import { trpc } from "@/lib/trpc/client"

import LoadingSpinner from "@/components/LoadingSpinner"

import { clearAncillarySessionData, getAncillarySessionData } from "../utils"

import type { Lang } from "@/constants/languages"

export default function GuaranteeAncillaryHandler({
  confirmationNumber,
  returnUrl,
  lang,
}: {
  confirmationNumber: string
  returnUrl: string
  lang: Lang
}) {
  const router = useRouter()

  const addAncillary = trpc.booking.packages.useMutation({
    onSuccess: () => {
      clearAncillarySessionData()
      router.replace(returnUrl)
    },
    onError: () => {
      router.replace(`${returnUrl}&errorCode=AncillaryFailed`)
    },
  })

  useEffect(() => {
    if (addAncillary.isPending || addAncillary.submittedAt) {
      return
    }

    const sessionData = getAncillarySessionData()
    if (!sessionData?.formData || !sessionData?.selectedAncillary) {
      router.replace(`${returnUrl}&errorCode=AncillaryFailed`)
      return
    }

    const { formData, selectedAncillary } = sessionData
    const packages = []

    if (selectedAncillary?.id && formData.quantityWithCard) {
      packages.push({
        code: selectedAncillary.id,
        quantity: formData.quantityWithCard,
        comment: formData.optionalText || undefined,
      })
    }

    if (selectedAncillary?.loyaltyCode && formData.quantityWithPoints) {
      packages.push({
        code: selectedAncillary.loyaltyCode,
        quantity: formData.quantityWithPoints,
        comment: formData.optionalText || undefined,
      })
    }

    addAncillary.mutate({
      confirmationNumber,
      ancillaryComment: formData.optionalText,
      ancillaryDeliveryTime: selectedAncillary.requiresDeliveryTime
        ? formData.deliveryTime
        : undefined,
      packages,
      language: lang,
    })
  }, [confirmationNumber, returnUrl, addAncillary, lang, router])

  return <LoadingSpinner />
}