"use client"

import { createContext, useCallback, useContext, useEffect } from "react"

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

import useLang from "@/hooks/useLang"

import type { RedeemFlowContext } from "@/types/components/myPages/myPage/accountPage"
import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"

export const RedeemContext = createContext<RedeemFlowContext>({
  reward: null,
  redeemStep: "initial",
  setRedeemStep: () => undefined,
  defaultTimeRemaining: 0,
  timeRemaining: 0,
  setTimeRemaining: () => undefined,
})

export default function useRedeemFlow() {
  const {
    reward,
    redeemStep,
    setRedeemStep,
    defaultTimeRemaining,
    timeRemaining,
    setTimeRemaining,
  } = useContext(RedeemContext)
  const lang = useLang()

  const update = trpc.contentstack.rewards.redeem.useMutation<{
    rewards: RewardWithRedeem[]
  }>()

  const onRedeem = useCallback(() => {
    if (reward?.id) {
      update.mutate(
        { rewardId: reward.id, couponCode: reward.couponCode },
        {
          onSuccess() {
            setRedeemStep("redeemed")
          },
          onError(error) {
            console.error("Failed to redeem", error)
          },
        }
      )
    }
  }, [reward, update, setRedeemStep])

  useEffect(() => {
    if (redeemStep === "initial") {
      setTimeRemaining(defaultTimeRemaining)
    }
  }, [redeemStep, setTimeRemaining, defaultTimeRemaining])

  return {
    reward,
    onRedeem,
    redeemStep,
    setRedeemStep,
    isRedeeming: update.isPending,
    timeRemaining,
    setTimeRemaining,
  }
}