"use client"
import { appConfig } from "@/config/app"
import { useRouter } from "@/i18n/routing"
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js"
import { useQueryClient } from "@tanstack/react-query"
import { useCookies } from "next-client-cookies"
import { CometChatUIKit } from "@cometchat/chat-uikit-react"
import { usePaypalSubscription } from "@/hook/useUsers"
import { useTranslations } from "next-intl"
import { useNotificationContext } from "@/component/Layout/NotificationContext"

type IProps = {
  cost: string
  onSuccess?: () => void
}

export default function PaypalButton({ cost, onSuccess }: IProps) {
  const router = useRouter()
  const cookies = useCookies()
  const queryClient = useQueryClient()
  const paypalSubscription = usePaypalSubscription()

  const transMessage = useTranslations("message")
  const { notify } = useNotificationContext()

  return (
    <PayPalScriptProvider options={{ clientId: appConfig.paypalClientID, currency: "USD", intent: "capture", components: "buttons" }}>
      <PayPalButtons
        style={{ layout: "vertical" }}
        createOrder={(data, actions) => {
          return actions.order.create({
            intent: "CAPTURE",
            purchase_units: [
              {
                amount: {
                  currency_code: "USD",
                  value: cost,
                },
              },
            ],
          })
        }}
        onApprove={async (data, actions) => {
          if (!actions.order) return Promise.reject("actions.order is undefined")

          const details = await actions.order.capture()
          const payerName = details.payer?.name?.given_name ?? ""
          const payerEmail = details.payer?.email_address ?? ""
          const payerId = details.payer?.payer_id ?? ""
          const orderId = details.id ?? ""
          const amount = details.purchase_units?.[0]?.amount?.value ?? "0"
          const currency = details.purchase_units?.[0]?.amount?.currency_code ?? "USD"
          console.log(details)

          paypalSubscription
            .mutateAsync({
              order_id: orderId,
              plan_id: amount === "7.99" ? "1-month" : "1-year",
              name: payerName,
              email: payerEmail,
              amount: parseFloat(amount),
              currency: currency,
              payer_id: payerId,
            })
            .then((res) => {
              console.log("res", res)
              cookies.remove("access_token")
              queryClient.removeQueries({ queryKey: ["auth.profile"] })
              CometChatUIKit.logout()
              router.push("/subscribe-successfully")
            })
            .catch((error) => {
              const concatenatedMsgs =
                typeof error?.response?.data?.msgs !== "string"
                  ? Object.values(error?.response?.data.msgs).join("<br />")
                  : error?.response?.data?.msgs || transMessage("fail")
              notify({
                type: "error",
                message: transMessage("something_wrong"),
                description: concatenatedMsgs,
              })
            })
        }}
      />
    </PayPalScriptProvider>
  )
}